...

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



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

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

anyhow..

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.

<select>
<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
</select>

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.

_Aerospace_Eng_
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#select {
width:150px;
float:left;
position:relative;
}
#select select {
width:150px;
position:absolute;
top:0;
left:0;
}
#content {
margin-left:155px;
}
</style>
</head>

<body>
<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>
</select>
</div>
<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>
</body>
</html>

BrightNail
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.

_Aerospace_Eng_
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.

mrruben5
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

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

_Aerospace_Eng_
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum