Small dropdown, large data

Question

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

@SrikanthAD Maybe I don't have the term correctly. When user click on a dropdown, a list of items appear. That's the popup. — the_lotus, Aug 09 '13 at 15:46

Rory O'Kane · Answer 1 · 2013-08-09T16:04:05.830

3

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

edited Aug 09 '13 at 16:04

answered Aug 09 '13 at 15:45

Rory O'Kane

29,210
11
96
131

This makes complete sense but unfortunately IE is nonsensical and cuts it off at the width of the select box. Can't define the width of the `option`s either. – Aug 09 '13 at 15:48
@ScottBrown Maybe I'm missing something here, but I didn't hear any mention of ie in the question. – zazvorniki Aug 09 '13 at 15:56
@zazvorniki Fair enough but I'd have thought that the OP wanted this to work across all browsers. They wouldn't have encountered the issue using a Gecko or Webkit browser so presumed they'd encountered the IE issue I described in my comment and answer. – Aug 09 '13 at 15:58
@ScottBrown You can actually have a drop down misbehave in webkit and gecko if you don't put a width on it. I've had the same thing happen before. :) – zazvorniki Aug 09 '13 at 16:07
@zazvorniki I did loads of presuming and guessed the OP had defined a width as they said that they had limited space. But you're quite right, no browser is perfect. – Aug 09 '13 at 16:13

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

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

edited May 23 '17 at 10:31

Community

1
1

answered Aug 09 '13 at 15:50

Good catch, yes i'm using IE. – the_lotus Aug 09 '13 at 16:04
No problem, I assumed that was the issue having fixed something similar on a `select` I was working on recently having tested in IE. – Aug 09 '13 at 16:05

score 1 · Answer 3 · answered Aug 09 '13 at 16:02

1

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!

answered Aug 09 '13 at 16:02

ayottepl

46
4

Small dropdown, large data

3 Answers3

Linked