Welcome to WebmasterWorld Guest from 54.196.26.1

Forum Moderators: open

Message Too Old, No Replies

width of the SELECT drop down

how to set the width of the select options drop down

     
3:03 pm on Aug 10, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 10, 2006
posts:2
votes: 0


Hi, I'm new at this forum.

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!

3:24 pm on Aug 10, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 10, 2006
posts:2
votes: 0


I have also tried setting the width through style, and once again, Firefox works fine and on IE nothing happend.
This is the code:
<html>
<head>
<style type="text/css">
.myselect {
width:150px;}
.myselect option{
width:180px;}
</style>
</head>
<body>
<br>
<br>

<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?

2:08 pm on Aug 11, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5019
votes: 24


I don't know that there is a good answer.

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members