Shrink Width, Multiple Box

Question

One of the elements in the multiple selection field is much longer than the others, is there any way to crack it in order to reduce its width.

<select size="1"> <option>item</option> <option>item</option> <option>item is really long</option> <option>item</option> </select> 

Answer 1

You can do this with CSS, either in the style of a string, or with a class.

With inline style:

 <select style="width: 50px;"> <option>item</option> <option>item</option> <option>item is really long</option> <option>item</option> </select> 

Class usage:

 <select class="narrow"> <option>item</option> <option>item</option> <option>item is really long</option> <option>item</option> </select> 

And in your CSS file or nested style sheet:

 .narrow { width: 50px; } 

Of course, change 50px to whatever width you need.

Answer 2

You can set the width using CSS. If you add the class to the select tag, for example 'foo', you can add css:

 select.foo { width: 200px; } 

If you want to use the inline style (not recommended):

 <select style="width: 200px";> <option>... </select> 

Answer 3

Try this, it works in FireFox, but not in IE:

 <STYLE type="text/css"> OPTION.shorter{ font-size:8px;} </STYLE> <select size="1"> <option>item</option> <option>item</option> <option class="shorter">item is really long</option> <option>item</option> </select>