Forum Moderators: open
I tried to search the solution to my problem here, but couldn't seem to find it, so I ask for your help.
I have a simple select box, that has options with text larger than the width of the select element. Firefox will expand the width of the options drop down to the size of the largest element, but IE doesn't seem to do that.
Has anyone already had this problem before? any fix?
Here is a simple example:
<html>
<head>
</head>
<body>
<br>
<br>
<select style="width:150px">
<option>Option 1 Option 1 Option 1 Option 1 Option 1</option>
<option>Option 2 Option 2 Option 2 Option 2 Option 2</option>
</select>
</body>
</html>
Thanks!
<select class="myselect">
<option>Option 1 Option 1 Option 1 Option 1 Option 1</option>
<option>Option 2 Option 2 Option 2 Option 2 Option 2</option>
</select>
</body>
</html>
I have also tried setting the width to each one of the options, but still didn't work.
I run out of ideas, anyone knows how to fix this?
If you leave off the width, I believe the select box will shrink-wrap it's content. That is, it will be as wide as the largest option in the list.
What you really want is to set the min-width css property. It will be ignored by IE6, but the good news is that IE7 will support it. IE7 will be out soon and when that happens, there will be a mass shift from IE6 to IE7 (it's going to be a Windows recommended update).
However, here's one alternative. You could try setting the width of the select (using CSS) in em units. Ems are related to the width of the letter "M", thus a width of 30em should allow for roughly 30 "M" characters. If you know the max length of the longest option, you could try setting the width for that value. This will also adjust for when users select a larger font size.
Hope that helps.
