Welcome to WebmasterWorld Guest from 54.205.88.118

Forum Moderators: incrediBILL

Setting the width of a SELECT dropdown

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

10+ Year Member



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 Jul 25, 2006 (gmt 0)

10+ Year Member



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 Jul 25, 2006 (gmt 0)

10+ Year Member



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 Jul 25, 2006 (gmt 0)

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



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 Jul 25, 2006 (gmt 0)

10+ Year Member



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 Jul 26, 2006 (gmt 0)

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



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month