Small Dropdown, Large Data

I have limited space and element in a dropdown with a large amount of text. It it possible to have the dropdown width small but the popup of the list large? Edit: I'm using IE

Solution 1:

Yes, it is possible. And in current browsers, you don’t have to do anything special for the different sizes to work. Just set the width of your select, and the options will still be as big as they need to be.

<selectid="menu"><option>short</option><option>a quite long option that is wider than the select</option><option>another option</option></select>

#menu {
    width: 100px;
}

jsFiddle

This works in Firefox, Chrome, and IE10:

But IE9 doesn’t support this:

Solution 2:

I'm afraid IE is the cuplrit here. Other browsers give you whatever width you need for your options and leave the select box at the size you define but IE8 and lower cuts it off to the width of the parent select box.

The answer lies with jQuery and is wonderfully documented here: Dropdownlist width in IE

Solution 3:

I don't know if it can help you, but i found something on css-tricks :

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

Take a look, hope it could help you!