Drop-down width -- IE labels crop

Question

I know it is possible to set a CSS width for a drop-down menu. In FF the top window is affected by it, while the option items scale as far as the content in them, however in IE the options are also as wide as the window, thus cutting the options' labels.

Is there a better way to control the width of SELECT element?

<select style="width:100px">
    <option>Very long label 1 is gpoing to be here</option>
    <option>Very long label 2 is gpoing to be here</option>
</select>

enter image description here

possible duplicate of [Dropdownlist width in IE](http://stackoverflow.com/questions/73960/dropdownlist-width-in-ie) — Quentin, Sep 28 '11 at 16:58

score 1 · Accepted Answer · answered Sep 28 '11 at 16:53

1

When talking to developers, please refer to select elements as select elements, because a "drop-down" can infer something else entirely.
There is a fix here.

answered Sep 28 '11 at 16:53

score 0 · Answer 2 · answered Sep 28 '11 at 16:55

You could use the width: auto rule. This automatically sets the width according to the length of the options.

If that doesn't work for you, you could use Javascript to dynamically change the width of the select when it is moused over, but nothing simple will make IE8 and below act like it is supposed to.

Drop-down width -- IE labels crop

2 Answers2

Linked