Select dropdown with fixed width cutting off content in IE

For IE 8 there is a simple pure css-based solution:

select:focus {
    width: auto;
    position: relative;
}

(You need to set the position property, if the selectbox is child of a container with fixed width.)

Unfortunately IE 7 and less do not support the :focus selector.

I did Google about this issue but didn't find any best solution ,So Created a solution that works fine in all browsers.

just call badFixSelectBoxDataWidthIE() function on page load.

function badFixSelectBoxDataWidthIE(){
    if ($.browser.msie){
      $('select').each(function(){
    if($(this).attr('multiple')== false){
      $(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).unbind('mousedown');
                       $(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"));

           });
        }
      });
    }
    }

Here is a little script that should help you out:

http://www.icant.co.uk/forreview/tamingselect/

For a simple Javascript-free solution, adding a title-attribute to your <option>s holding the text might be enough, depending on your requirements.

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

This will show the cut-off text in a tool-tip fashion on hovering the <option>, regardless of the width of the <select>.

Works for IE7+.

Not javascript free i'm afraid, but I managed to make it quite small using jQuery

$('#del_select').mouseenter(function () {

    $(this).css("width","auto");

});

$('#del_select').mouseout(function () {

    $(this).css("width","170px");

});