Ewen's Files

Internet Explorer Select Width Bug Workaround

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.

This jQuery plugin proposes a work around.

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

As of 17th June 2010, it is confirmed to work in Internet Explorer versions 6, 7 and 8.

This plugin adds three additional elements to the DOM; a <span> element that acts as the select container; an <a> element that acts as an overlay; and another <span> element within the <a> element that adds the visual part.

Class names representing the browser version and which state the select is in are added to the container and the the overlay.

For Internet Explorer 6, you should also use the bgiframe plugin. Just include it in your document and the ieSelectWidth plugin will automatically detect and use it.

View the page source to see how to use this jQuery plugin.

Contact me here with any queries or bug reports etc.

Obviously the demo should be viewed with Internet Explorer in order to see the examples working.

A new version of this plugin that adds support for CSS borders and padding can be found here.

Examples

Example one

Set the select with via the plugin (pixel only.)

Example two

Set the select with via CSS.

Example three

Compensates for margin, left/right top/bottom and borders and padding (borders and padding only applies to IE 8.)

Like my Stuff?

All the stuff I create and host on this site is free for personal and commercial use unless otherwise stated.

If you find a use for any of it and would like to show your appreciation you can send me a donation via PayPal.

Also it would be great if you could like, +1 or tweet any of the projects that you use.

Cheers, Ewen

Project Information

Name
Internet Explorer Select Width
Date Created
Tuesday 19th July 2011
Description
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. This jQue…
Project Resources

Latest Projects

Project
PHP Character Converter
Date Created
Sunday 2nd October 2011
Description
Using a conversion library this class can convert the characters in a string, for example using the NATO Phonetics library, a string containing 'test' would be returned as 'tango e…
Project
jQuery Style File Input
Date Created
Sunday 25th September 2011
Description
The Style File Input jQuery plugin provides a method for displaying a styled file input. It creates several extra elements in the DOM which can be freely styled in almost any way.