Html Select width problem in IE : workaround using JQuery

Setting the fixed width of a <select> element in Internet Explorer will cause all of the select options that are wider than the select's set width to be cropped.

If you set a static width on the <select> element, any <option> elements that are wider get cut of in IE. There is no good CSS solution for this.

So here are some workarounds to rsolve the problem.

Keep the static width on the select element by default, but when moused over in IE, change the width to "auto". And then put it back to static width when moused out.

onmouseover="autoWidth(this)"
onblur="resetWidth(this)"

So when a user clicks on the select the width will automatically expand, and user moves out of the select box, the width will be reset to original.

But the problem with this approach is the original size of the select box is not maintained and the width of the box expands, thus causes the page look and feel collapse.

It has been tackled with JavaScript a number of ways. but nothing suits to the problem.

So tried in a jQuery way of solving the Problem.

$(function() {
 
  if(browser.isIE){  
    $("#select")
        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
        })
        .mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));
        }); 
    }
});

   1. When mouse pointer goes over select element, keep track of the original width, then set it to "auto".

   2. When mouse pointer leaves, set width back to original width.

But again the problem of page collapse and not consistent...oops!

There is a jQuery plugin proposes a work around.

http://www.jainaewen.com/files/javascript/jquery/ie-select-width/

Download this Plugin and add it to your class path, and call the function.. thats it..

<script type="text/javascript" src="/js/jquery/plugins/jquery.ie-select-width.min.js">&#xa0;</script>
  <script type="text/javascript" language="JavaScript">
    //Workaround for IE html select issue(Width of the dropdown is not expanding w.r.t to the content width.)
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
        if (browser.isIE) {
         $j('select[name*=xxxxx]').ieSelectWidth({});
        }
    });
  </script>

Applying this plugin makes the select element in Internet Explorer appear to work as it would work in Firefox, Opera etc...

However I noticed this works exactly as FF on IE versions 8 & 9, but in 6 & 7 the width of the dropdown also expands to the max width of the options but solves the Problem.