a way to tell if options do not fit inside of a select - in IE

Question

In IE6, and possibly 7, if you set the width of an to any value other then auto, if the options inside of that select are wider then the select's width, they get cut off. this is bad. Firefox is smart enough to not do this.

Question: How can i tell if the options are being cut off with javascript?

How have you dealt with this issue other then setting width to auto?

Answer 1

Good question. A bit of a rant here but IE's implementation of <select> controls is abysmal. It has the following problems (among others I'm sure):

• (As you've noticed) setting the width on the <select> cuts off <option> elements, regardless of overflow instructions
• they have this magic ability to sit overtop of all other controls on the page, regardless of position and layering (z-index) instructions. This was a huge PITA for early developers of "dialog" widgets; any dropdowns behind the dialog would bleed through overtop of the dialog itself.
• you cannot disable individual <option> elements
• you cannot hide/show individual <option> elements
• the <select> does not reflect css styles set on the selected <option>
• can't set the innerHTML property to a string of new option items
• if you do not set a value attribute on each <option>, mySelectBox.value silently fails
• when using the keyboard arrows to navigate throught the list of <option> elements, the change event fires on every keystroke (Opera has this problem too)
• css styles on <option>s and <optgroup>s are generally completely ignored (only backgound-color and color work)
• programmatically changing the options list hides the dropdown (this sucks for "type ahead" implementation attempts who want the dropdown to stay visible)
• IE7 tries to fit all the options on the screen when shown. For large lists this means the dropdown content will sit overtop of the dropdow when shown (this in and of itself is not wrong, but it is inconsistent with other IE versions)

As for your problem, one solution is to toggle the width to "auto" when the options are shown, and set if back to a set width when the options are closed, as outlined here: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

The obvious drawback of this is that the screws up the flow of the document as neighboring elements all shift around to account for width:auto setting.

Answer 2

Take a look at this post by Chris Coyier.