Select Boxes on IE

Select boxes with a width are difficult on IE! Here is a before and after example, using a technique described by Doug Boude, slightly refined and 'prototype-ified' by us (download our JS class here).

Before the fix:

This is a select box with long option text with a width of 60px set on it.

After the fix:

This is a select box with long option text with a width of 60px set on it with the IEDropdown fix.

Notes

This is only known to work in IE7 and IE8. The select box should have a containing element with overflow: hidden set, in order to prevent it from interfering with other elements on the page. To use this code, just past in a select box to the constructor of IEDropdown once your page has loaded:

  document.observe('dom:loaded', function() { 
       new IEDropdown('my-select-id'); 
  }, false);