homepage Welcome to WebmasterWorld Guest from 50.19.169.37
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Setting the width of a SELECT dropdown
activeco




msg:3018785
 9:21 pm on Jul 22, 2006 (gmt 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?

 

tata668




msg:3020820
 12:39 am on Jul 25, 2006 (gmt 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!

activeco




msg:3021361
 12:47 pm on Jul 25, 2006 (gmt 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.

penders




msg:3021528
 3:34 pm on Jul 25, 2006 (gmt 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.

activeco




msg:3021909
 9:25 pm on Jul 25, 2006 (gmt 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.

penders




msg:3022410
 11:02 am on Jul 26, 2006 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved