How to expand 'select' option width after the user wants to select an option

jquery css html-select content-length
Berlin Brown picture Berlin Brown · Nov 16, 2008 · Viewed 142.8k times · Source

Maybe this is an easy question, maybe not. I have a select box where I hardcode with width. Say 120px.

I want to be able to show the second option so that the user can see the full length of the text.

Like everything else. This works fine in Firefox, but doesn't work with Internet Explorer6.

Answer

cychan picture cychan · Feb 19, 2009

I fixed my problem with the following code:

<div style="width: 180px; overflow: hidden;">
   <select style="width: auto;" name="abc" id="10">
     <option value="-1">AAAAAAAAAAA</option>
     <option value="123">123</option>
   </select>
</div>

Hope it helps!

Related questions

Creating a select box with a search option

I am trying to replicate what you can see here in this image. I want to be able to either type in the text field above the box or just click on the option directly. What would be the best …

Read More
Is it possible to style a select box?

I've got an HTML select box that I need to style. I'd prefer to use just CSS but if I have to I'll use jQuery to fill in the gaps. Can anyone recommend a good tutorial or plugin? I know, …

Read More
jQuery and css: hide/show select options with a certain css class

In the html code I have select options like this: <option value="1" class="myclass5">Value1</option> In jQuery: var cod = $(this).val(); // This is the value of another select: when the value $("option[class^=myclass]").hide(); $("…

Read More