fix size drop down with long text in options (restricted view in IE) [duplicate]

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.

Answer 2

Thanks for Jogendra for rough sketch. here is complete working copy

<div class="ddcMain">
    <div class="selection">Selection</div>
    <input type="hidden" id="itemSelected" name="itemSelected" value=""  />
    <div class="ddListCon">
        <ul id="ddList">
            <li>1239187239172391823kajsasdfaasdfas9817293971293</li>
            <li>1239187239172391823kajsasdfaasdfas9817293971294</li>
            <li>1239187239172391823kajsasdfaasdfas9817293971295</li>
        </ul>   
    </div>
</div>

<style>
div.ddcMain{ position:relative;}
div.selection { width:150px; overflow:hidden; border:1px solid; padding:5px;}
div.ddListCon {position:absolute; top:33px; display:none; border:1px #000 solid; padding:5px;}
div.ddListDisplay {display:block;}
ul#ddList{ list-style:none; margin:0; padding:0;}
ul#ddList li:hover{
    background-color:#999999;
}

ul#ddList li
{
    display:list-item;
    width:auto;
}

</style>

<script type="text/javascript">
  $(document).ready(function() {
      $('div.selection').bind('click', function(){
         $("div.ddListCon").toggleClass("ddListDisplay");     
      });
      $('ul#ddList li').bind('click', function(){
          $('div.selection').text($(this).text());
          $('#itemSelected').val($.trim($(this).text()));

          $("div.ddListCon").toggleClass("ddListDisplay");    
      });



  });
</script>

Answer 3

I've been responding to old questions like this. It's a common problem. I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

It's a jquery plugin to make a styleable unordered list backed by the hidden select element.

The source is on github: https://github.com/tncbbthositg/GiantDropdown

You'd be able to handle behaviors and styles on the UL that you can't with the SELECT. Everything else should be the same because the select list is still there, it's just hidden but the UL will use it as a backing data store (if you will).