Dropdownlist Width in Ie

Dropdownlist width in IE

Here's another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Use it in combination with this piece of CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

All you need to do is to add the class wide to the dropdown element(s) in question.

<select class="wide">
    ...
</select>

Here is a jsfiddle example. Hope this helps.

DropDownList width in Internet Explorer

I'd recommend not using the drop down list, but a more javascript friendly one like this

http://jquery.sanchezsalvador.com/samples/example.htm

This will allow your content to expand past the selects width.

Controlling the drop down list width in IE8 on select

For IE8 you will need to use some JavaScript for this. There are JQuery plugins that do this too, but I think there is no work around without using js.

Take a look at this other SO thread for different approaches and js libraries you might use.

In my experience, the best solutions involve replacing the select element with some other HTML, CSS and JavaScript combination, as trying to change the width of the original select on certain events will move the content on the right of it.

Width issues using HTML select within a DIV using IE

Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.

---

Related Topics