View Full Version : DropDown too big for the container..how to fix?

07-20-2005, 02:00 AM
Hey all.

I have a dropdown that needs to work in IE, Netscape, Firefox, Mac Net, Safari.


the dropdown is breaking out of a container if the contents (derived from a database) are too long.

Is there a way to "clip" the dropdown, but when you click on it...it expands to the desired length.

<option> this is a good width
<otpion> this is way too long cause it smells like taffy and popcorn shrimp
<option> this is fine too even like this

Now, the view would see perhaps a select box that is perhaps 300 pixels wide..but when you expand it...you'll be able to see all entries..even the long one.???

Please advise.

07-20-2005, 02:15 AM
Hmm maybe you can get some ideas from this. It uses onfocus to change the width and onblur to change it back to its normal state. Because its absolutely positioned it has no effect on the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#select {
#select select {
#content {

<div id="select">
<select name="" onblur="this.style.width='150px'" onfocus="this.style.width='350px'">
<option> this is a good width </option>
<option> this is way too long cause it smells like taffy and popcorn shrimp </option>
<option> this is fine too even like this </option>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>

07-21-2005, 12:28 AM
thanks -- you have the rigth idea of my problem. Your solution is fine, but its a little dodgy in different browsers.

Isn't there a more elegant solution that is crossbrowsers?

can you add 'newlines' to options? that might work..

please advise.

07-21-2005, 12:42 AM
No you can't add new lines. You could I guess look into optgroup I'm not sure exactly what it does never used it. Or just make the select a set width and deal with the fact that part of the options are cut off, or set your generated content to not output such long options.

07-21-2005, 11:32 AM
If you look down at the right you see in the codingforums.com's nav optgroup is used :D

07-22-2005, 07:49 AM
what is the benefit of optgroup?...seems like a normal dropdown to me..

07-22-2005, 08:36 AM
Its just meant to seperate the different options, I don't think it suits your needs. You don't have many options here (no pun intended) other than the things I have told you already. A select menu isn't too customizable.