3

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

Wasim Shaikh
  • 6,880
  • 18
  • 61
  • 88
  • 1
    Adding comment so I don't forget to come here again. As far as I know, there is no workaround for this - but maybe somebody knows something. – Pekka Nov 09 '09 at 12:56
  • 2
    Ah. Just discovered the "favorite" button. :) – Pekka Nov 09 '09 at 12:56

6 Answers6

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 combination of other elements. They will behave like a selectbox, but require javascript to work.

Marius
  • 57,995
  • 32
  • 132
  • 151
2

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

});
almog.ori
  • 7,839
  • 1
  • 35
  • 49
  • You should propably do something with fixed positioning and such, because this will reflow the page. – Pim Jager Nov 09 '09 at 14:08
  • Agreed, this IS a bit of a hack – almog.ori Nov 09 '09 at 14:23
  • You can put it in a div with overflow:hidden, a là the one of the answers from http://stackoverflow.com/questions/586718/recommendations-for-dropdown-menu-items-that-are-too-wide , which leads you to http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm . – techpeace Jan 12 '11 at 18:15
0

There's a project on github for this as a jQuery plugin: http://css-tricks.com/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();
});
Adam Tuliper
  • 29,982
  • 4
  • 53
  • 71
0

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'); });
Vitaliy Ulantikov
  • 10,157
  • 3
  • 61
  • 54
-1

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.

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
-1

Hedgerwow has an excellent solution to this issue:

http://www.hedgerwow.com/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.

Paul Irish
  • 47,354
  • 22
  • 98
  • 132