IE fix for fixed width select cuts off options

While working the other day I came across one more problem with IE :), If we set a static width on the <select> element, any <option> elements that are wider get cut of in all Internet Explorers.

Select rendered in IEs

Select rendered in other bowsers(this is in firefox)

In almost all other browsers if you fix the width of the element, the pulldown still displays the options at the width required to allow you to read them all. In IE however the pulldown is limited to the width of the select, which means wide options get cut off. After doing some searching and scratching I found that there is no good CSS solution for this. But it can be tackled with JavaScript in a number of ways.

Solution:

The normal way:

<style>

select.normal {

    width: 100px;

}

select.expand {

    width: auto;

}

</style>

<select class="normal"

       onMouseDown="if(document.all) this.className='expand';"

        onBlur="if(document.all) this.className='normal';"

        onChange="if(document.all) this.className='normal';">

<option>Select from this list</option>

<option>Hey this is a long text here which needs to shown in IE</option>

<option>This is another long text here which needs to shown in IE</option>

</select>

Now if you want to use a library like jQuery this can be again written as:

<select class="normal">

<option>Select from this list</option>

<option>Hey this is a long text here which needs to shown in IE</option>

<option>This is another long text here which needs to shown in IE</option>

</select>

<script>

jQuery(document).ready(function(){

var isIE  = jQuery.browser.msie;

if (isIE) {

var select = jQuery("select.normal");

select.mousedown(function(){

                     jQuery(this).removeClass('normal').addClass('expand');

                });

select.blur(function(){

                     jQuery(this).removeClass('expand').addClass('normal');

                });

select.change(function(){

                     jQuery(this).removeClass('expand').addClass('normal');

               });


}

});

</script>

So as you find here, the solution is fairly simple. Have two classes one for the normal way of showing and the next when we click on the select box. The only thing thing that changes here is width. The select box is given the width:auto so that it can expand to what ever length the content is out there in the options. Also we should make sure that this behavior is done only for IEs.

Every thing is well and fine for this normal case. But consider a case where we have select box in a container which cannot expand beyond specific width, since it could break the layout.

In this case we can have a small fix to the CSS class. Add position absolute so that it just layers over the other contents.

<style>

select.normal {

    width: 100px;

    position:static;

}

select.expand {

    width: auto;

position:absolute;

}

</style>

As you can see the select opens without breaking the layout.