Multiple select with fixed width problem with options that are too long

Question

I have this:

 <select id="combo1" size="7" name="operacion">
   <option selected="" value="000">Selecciona una categoría</option>
   <option value="1">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option>
   <option value="2">"MODIFICACIONES"</option>
   <option value="3">"RENOVACIÓN"</option>                        
 </select>

And it's width is fixed but as it happens that the options come from a database they are sometimes too long and there's no way I can see them.

You can see it here: http://jsfiddle.net/vN47R/

Only thing I could find was In a fixed width <select multiple> html box, is there a way to see text options that are to long? but didn't help me out.

That might help: http://stackoverflow.com/questions/4258723/fix-size-drop-down-with-long-text-in-options-restricted-view-in-ie or http://stackoverflow.com/questions/1787620/wrapping-text-within-a-multiple-select-list — Py., Sep 14 '11 at 07:36
Yeah I suspected that this wouldn't have an easy css solution :S — Elaine Marley, Sep 14 '11 at 07:43

score 3 · Accepted Answer · answered Sep 14 '11 at 07:35

You can set a title on the option, that way the text is shown as a tooltip when you point at the item:

<option value="1" title="AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA">"AUTORIZACIÓN PARA TRABAJAR POR CUENTA PROPIA"</option>

Demo: http://jsfiddle.net/Guffa/vN47R/2/

I tested this in some browsers, and at least it works in IE 9, Firefox 6, Chrome 13 and Opera 11. However, it will naturally not work in an environment where you don't have any means of pointing at the item, for example on a phone.

score 2 · Answer 2 · answered Sep 14 '11 at 07:47

2

Try this:

Wrap your select box in a DIV and set the overflow-x: scroll property on it and specify a width. Then, take the specific width off of your SELECT box itself. This way, the SELECT box will expand to be as wide as needed based on the content, and you will get a horizontal scrollbar on your DIV. The only drawback to this is that if you don't set a high enough height, you will have to scroll to the right to scroll down within your SELECT box.

answered Sep 14 '11 at 07:47

chrishall78

158
7

I did it here if anyone could make use of it: http://jsfiddle.net/vN47R/12/ for me it won't work cause I can't control the amount of options there will be in the select and double scroll would be fail but thanks for the idea – Elaine Marley Sep 14 '11 at 08:52
To eliminate the double scroll, set `overflow-y:hidden` on the DIV container. These are CSS3 options, so they will not work in IE 8 and older browsers. – chrishall78 Sep 14 '11 at 08:59

score 0 · Answer 3 · answered Sep 14 '11 at 07:31

0

try to use word-break: break or maybe white-space: normal

answered Sep 14 '11 at 07:31

simoncereska

3,035
17
24

that way I would recommend jQuery plugin for selects http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/ this way you'll be able to style selects easy – simoncereska Sep 14 '11 at 07:49

Multiple select with fixed width problem with options that are too long

3 Answers3