Question

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

I have a dropdown with reasonabily long text in it. it display fine in firefox but showing trimed text with respect to its size when i click on it in Internet explorer.

<select style="width:100px;" id="test">
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
<option>1239187239172391823kajsasdfaasdfas9817293971293</option>
</select>

when you open the page with above dropdown in firefox and click to view its values it will show complete description.
but in internet explorer, when clicked it only show 100px and rest of the text is trimed.

is there any way to view the complete text when clicked on dropdown in ie. as it shows in firefox?

Answer 1

This is a control render by browsers rendering engine & some CSS property may not work on it. In order to meet your goal try to make some customize controll like this

html markup:

<ul  id="test">
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
<li>1239187239172391823kajsasdfaasdfas9817293971293</li>
</ul>

CSS: 

    #test li{
display:block;
background-color:#CCCCCC;
border:1px #FFF solid;
display:none;
width:auto;
cursor:pointer;
}
#test li:hover{
background-color:#999999;
}

jQuery:

$("#test li:first").css({'width':150+'px','display':'block', 'border':'1px #000 solid', 'overflow':'hidden', 'cursor':'pointer'});
    $("#test li:first").toggle(function(){
                        $(this).siblings().css({'display':'list-item','width':'auto'});
                        },
                        function(){
                        $(this).siblings().css({'display':'none'});
                        }

This just a rough sketch of it.