Can I set the width of a select box?

[STARLOVIN]

I'm looking to do a drop down menu system kinda like what they have on this site. http://www.ottawa.ca/index_en.html

I'd like to know if there's a way for me to define the width of the select box so that the text in each <option> wraps itself based on the set width.


Thx.

[ryanbutler]

You wouldn't need to. The drop down list will inherit the largest option in the drop down option list and adjust the width accordingly.

[STARLOVIN]

I understand that although I want the select box to be a specific width and not have it's width determined by the largest select option. therefore I need the text to be able to wrap in order to maintain the set width.

[webStruck_]

Try this in css:

select
{width: 200px;}

setting your desired width.

[STARLOVIN]

yes that does set the width but the text doesn't wrap. i need the text to wrap.

[toicontien]

You could try doing this:

option {
white-space: normal;
}

Though since some browsers render SELECT elements using the operating system's native select object instead of a browser generated object, setting the width of non-multi SELECTs might not work, as well as getting the OPTIONs text to wrap might not work.

[STARLOVIN]

Please take a look at the example here http://www.ottawa.ca/index_en.html

notice how the drop down menus have a fixed width in order to fit nicely into the user interface. the text in the drop down menus wrap nicely. I'm aware that this is done with javascript but I'd like to know if it can be done with css.

[mrizwan]

Please take a look at the example here http://www.ottawa.ca/index_en.html

notice how the drop down menus have a fixed width in order to fit nicely into the user interface. the text in the drop down menus wrap nicely. I'm aware that this is done with javascript but I'd like to know if it can be done with css.

STARLOVIN, I don't think those are html drop downs. These are made using scrolling DIVs. Which get visible when you click top image/link.

[Tabo]

Yes, its done by DIV and changing highlight colour on mouseover

[STARLOVIN]

ok, i guess i'm not wording my question properly. Am i able to recreate the same effect by using an html drop down menu. I just want to know if there's any way to wrap text within a html drop down menu where the width of the select box is pre-defined.

[mrizwan]

Perhaps you are again not asking the right question.
I guess this is not possible using html select (drop down) control.
You will have to use similar technique div and mouse events to create similar menu.

[ToonMariner]

Why not go with the safe answer and say NO - its not possible. This then allows you to get on with your life and allow visitors to your site to see what they would expect from a drop down box rather than be surprised think one option in there is actuallythe second or third line of an option.

Alternatively you can waste time doing the javascript and confusing many visitors enough to make them leave your site...

[duke_okc]

According to w3 org's (http://www.w3.org/TR/css3-text/#wrapping) web site text-wrap property can have 4 values; normal|unrestricted|none|suppres. I agree with these guys that you can not do it with css and that it was done using a different technique. But.. If you still don't believe them then give it a shot yourself by using the above values..perhaps you would get lucky this time and if you do,,,let us know please :)