HTML Select options width is cropped in IE. Any solutions ?

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 wasy to make the IE's select's behaviour to be like that of NON IE browsers ?

Answer 1

css:

.set_width { width:120px; }

html:

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

Answer 2

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 3

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 4

I have a solution that works for me, so I figured I'd go ahead and post it (with some caveats at the bottom). It's not the most efficient use of jQuery, I'm sure, but it's working how I want it to work. Basically, I have a list of timezones that are (obviously) rather long text strings.

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

Description:

• Conditionally set for IE browsers only.
• This solution is a modified version of a script provided by Chris Coyier (http://css-tricks.com/select-cuts-off-options-in-ie-fix/).
• Also, this solution assumes that you, like me, don't really care about IE6 so much. The basic functionality is there, so IE6 browsers can still see most of the select options, submit the form, etc., but I can't waste any more time trying to appease this small subgroup.

Caveats:

• The select list has a fixed width before it's focused.
• Onmouseout, the list has to be blurred or changed before the size is set back to the original fixed width. The reason I made sure the select list was blurred or changed first, is because previously, onmouseout would fire off as soon as your mouse left the select box (meaning you could try and select an option, but they would disappear before you could click one).
• Conversely, on mouseover the focus is set to make sure the blur event is fired properly.

Answer 5

Here's another approach that worked for me:

<style>
select.limited-width {
    width: 200px;
    position: static;
}

select.expanded-width {
    width: auto;
    position: absolute;
}
</style>

<select class="limited-width" 
        onMouseDown="if(document.all) this.className='expanded-width';"
        onBlur="if(document.all) this.className='limited-width';"
        onChange="if(document.all) this.className='limited-width';">

    <option>A normal option</option>
    <option>A really long option which messes everything up</option>
</select>

By switching to position:absolute you remove the element from the page flow, which helps if you find your select box moving when you expand it.

I've chosen to rely on sniffing document.all as a check for IE as it keeps it compact and avoids the need for a separate function. If that doesn't work for you, define a function within IE conditional comments and call that instead.

One small bug, if you select the same element it won't shrink again until you move the focus to another element, I'm calling it a feature ;-)

Answer 6

I like 26design's solution but it has 2 flaws:

1. Under some circumstances it is possible to fire the mouseover event twice resulting in the origWidth variable getting set to "auto" preventing the select ever reverting to original size.

2. If the text values in the drop down do not need extra space then the select actually shrinks which looks odd.

This version fixes both of these issues:

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(this)
        .mousedown(function(){
            if($(this).css("width") != "auto") {
                var width = $(this).width();
                $(this).data("origWidth", $(this).css("width"))
                       .css("width", "auto");
                /* if the width is now less than before then undo */
                if($(this).width() < width) {
                    $(this).css("width", $(this).data("origWidth"));
                }
            }
        })
        /* Handle blur if the user does not change the value */
        .blur(function(){
            $(this).css("width", $(this).data("origWidth"));

        })
        /* Handle change of the user does change the value */
        .change(function(){
            $(this).css("width", $(this).data("origWidth"));

        });
    });
}

Tested in IE6-8

Answer 7

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');
}