While using fixed width select tag , there is one bug in IE. When the content of the option in the select tag is more than the width of select tag its hide. Its working fine in fire fox , not in IE.

alt text .gif

While using fixed width select tag , there is one bug in IE. When the content of the option in the select tag is more than the width of select tag its hide. Its working fine in fire fox , not in IE.

alt text http://img691.imageshack.us/img691/4530/dropdown.gif

• javascript
• html
• css

Share Improve this question Follow asked Nov 9, 2009 at 12:51 Wasim ShaikhWasim Shaikh 7,0401818 gold badges6262 silver badges8888 bronze badges 2

• 1 Adding ment so I don't forget to e here again. As far as I know, there is no workaround for this - but maybe somebody knows something. – Pekka Commented Nov 9, 2009 at 12:56
• 2 Ah. Just discovered the "favorite" button. :) – Pekka Commented Nov 9, 2009 at 12:56

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

This is a bug in IE, and there is no way to solve it, apart from making the select box wider:

<select style="width: 500px;">
  <option value="1">
    This is a very long option, but it's cool, cause the select is also very long
  </option>
</select>

Another alternative is to use a framework that will replace the selectbox with a styled bination of other elements. They will behave like a selectbox, but require javascript to work.

The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.

heres a sample using jquery.

$(function() {

$(".SecuritySelect")

    .mouseover(function(){
        $(this)
            .data("origWidth", $(this).css("width"))
            .css("width", "auto");
    })

    .mouseout(function(){
        $(this).css("width", $(this).data("origWidth"));
    });

});

Listed solutions are poor. One I found and used was

$('select#CourtId')
    .focus(function() { $('select#CourtId').css('position', 'relative').css('margin-right', '-300px').css('min-width', $('select#CourtId').css('width')).css('width', 'auto'); })
    .blur(function() { $('select#CourtId').removeAttr('style'); });

There's a project on github for this as a jQuery plugin: http://css-tricks./select-cuts-off-options-in-ie-fix/

Simply use it as:

$(document).ready(function () {
    //all select lists expand to full width when selected
    $("select").ieExpandSelectWidth();
});

I've never tried this, but you could try setting the input field

position: absolute

and e.g.

width: 500

onFocus, and set it back to normal onBlur. You may have to modify your layout slightly so it doesn't jiggle but I can't think of anything why this should not work.

Hedgerwow has an excellent solution to this issue:

http://www.hedgerwow./360/dhtml/ui_select_with_fixed_width/bk/demo.php

It drops in a really slick DHTML menu, but does it very cleanly. Solid fix.