Welcome to WebmasterWorld Guest from 54.144.107.83

Forum Moderators: incrediBILL

Message Too Old, No Replies

Setting the width of a SELECT dropdown

     
9:21 pm on Jul 22, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:June 13, 2004
posts:650
votes: 0


Is there some simple way without using scripts to controll width of select dropdown menu?

[webmasterworld.com...] gives css solution, but if you open the menu the width is still not limited.

I use this:
<select name="fd" width="230" STYLE="width: 230px" size="0">

However I get the same problem: if you open the menu, the list becomes wide as it's widest element, in my case more than 230.

Note that the "size=0" is not necessary here, but if I set up the size to any positive number I get the correctly working width, but a list box instead of dropdown list.

Any way to go around this?

12:39 am on July 25, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 9, 2005
posts:228
votes: 0


I don't think so. Even if you put the select in an iframe, when opened it scales to its widest element.

I'm pretty sure you'll have to use a "false" select box (a dhtml made one) if you want to control the opened width. But then it won't work if javascript is disabled.

Good luck!

12:47 pm on July 25, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:June 13, 2004
posts:650
votes: 0


Thanks for your input Tata.

In the meantime I solved it by showing the cut text of 60
characters and putting the tooltip over it showing the full version, so I escaped js.

3:34 pm on July 25, 2006 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts:3123
votes: 0


I was just having a play with sizing the width of the drop-down list and I found you can style the width of the <option> elements to create this effect.

#myselect { 
width:230px;
}
#myselect option {
width:220px;
}

<select name="myselect" id="myselect" size="0"> 
<option value="1">Pellentesque sit amet est dictum.</option>
<option value="2">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</option>
etc...
</select>

This works OK in FF1.5 (but not FF1.0), IE5+6 and Opera 8, however, FF seems to size the drop-down slightly larger than the <select> element if you specify the same width for each (setting the <option> width to 220px in this case seems to overcome this).

The width of the drop-down (as rendered on the page) cannot be forced to appear any smaller than the width of the <select>.

Specifying a width that is much smaller than the select causes FF to make text in the drop-down dissappear when you hover over it - IE6 is no different, defaulting to the width of the <select> as a minimum.

9:25 pm on July 25, 2006 (gmt 0)

Preferred Member

10+ Year Member

joined:June 13, 2004
posts:650
votes: 0


I was just having a play with sizing the width of the drop-down list and I found you can style the width of the <option> elements to create this effect.

Very nice, penders.
I'll keep this for the future projects.

Specifying a width that is much smaller than the select causes FF to make text in the drop-down dissappear when you hover over it - IE6 is no different, defaulting to the width of the <select> as a minimum.

Yes, but this could be helped by adding "title" tag : <option title="full text here"> (well, up to the length of default tooltip width, I think 80 chars), so actually adding tooltip.

Thanks.

11:02 am on July 26, 2006 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts:3123
votes: 0


Yep, agree, adding a title="full text" is needed when not displaying the full text in the drop-down itself.

Just to clarify...

Specifying a width that is much smaller than the select causes FF to make text in the drop-down dissappear when you hover over it - IE6 is no different, defaulting to the width of the <select> as a minimum.

Note 'much smaller'. This is actually quite a strange visual effect in FF1.5 (and best avoided I recon). If, for example, you styled the <option> tag to width:100px, much smaller than the <select> width of 230px, then although the actual width of the drop-down will be 230px (same as the <select>), when you hover over the items in the drop-down list part of the text will dissappear before your very eyes - as it only shows the first 100px (as defined in CSS), but only when you hover over it!

But, as I say, using a width that is just 10px less for the <option> tags seems to work OK.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members