CODEWITHSUNDEEP
htmlcss
the_lotus
the_lotus

Reputation: 12748

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

Upvotes: 2

Views: 3529

Answers (3)

Rory O'Kane
Rory O'Kane

Reputation: 30388

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.

<select id="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:

short select with long options popup in Firefox

short select with long options popup in Chrome

long options popup of select in IE10

But IE9 doesn’t support this:

short select with short options popup in IE9

Upvotes: 3

user527892
user527892

Reputation:

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

Upvotes: 1

ayottepl
ayottepl

Reputation: 46

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!

Upvotes: 1

Related Questions