HTML Select options width is cropped in IE. Any so

Question

In Mozilla and non-IE browsers, if the option of select list is of a greater length than the select's width, it will show up. But in IE, it will crop the option up to the select's width.

Is there any way to make IE's select behaviour to be like that of non-IE browsers?

Answer 1

for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

I used this way to showed the drop down list when the width is not showed correctly.

It work for IE6, Firefox and Chrome.

Answer 2

This seems to work well in forcing IE to reevaluate the select width. Works in IE7 and IE8.

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}

Answer 3

OK so here is the solution I figured out after quite some time. It will automatically increase the size of the select box based on the maximum width of the child options.

<script type="text/javascript">
  window.onload = function()
  {
    var elem = document.getElementById('test');
    var values = elem.length;
    var biggest_value = 0;
    var biggest_option = '';

    for(var i = 0; i <= values; i++)
    {
      if (elem.options[i])
      {
        var len = elem.options[i].value.length;
      }

      if (biggest_value < len)
      {
        biggest_value = len;
        biggest_option = elem.options[i];
      }
    }

    document.getElementById('test').style.width = biggest_option.offsetWidth + 'px';

};
</script>

The Select Box:

<select id="test">
 <option value="Hello">Hello</option>
 <option value="Hello Again">Hello Again</option>
 <option value="Hello Yet Again">Hello Yet Again</option>
</select>

Answer 4

The absolute easiest way to make sure select lists are always exactly as wide as they need to be is to allow the browser to set their width, i.e. don't set a width yourself. This "method" (really a non-method, as it involves not doing something) will work on every browser ever made, even IE6.

Answer 5

I placed in a table cell, just trying to keep the same width with the cell.

$("#id" ).width($("#id" ).parent().width());

btw, thanks for all the posts, it helps me a lot.

Answer 6

css:

.set_width { width:120px; }

html:

<select class="set_width"><option>one</option><option>two</option></select>