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

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?

score 1 · Accepted Answer · answered Nov 24 '10 at 06:18

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.

score 1 · Answer 2 · answered Dec 06 '10 at 13:59

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>

score 0 · Answer 3 · answered Jun 26 '12 at 16:14

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).

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

3 Answers3

Linked

Related