Sunday, November 3, 2013

Adjusting a dropdown width on IE7 and IE8

At times, the width of a dropdown (aka combo box) is constrained, in the sense that it can't be made wide enough to completely show the text for the selected option. However, with all modern browsers, when you open the dropdown, the full values show, as illustrated on the following screenshot:

A dropdown with long labels on a modern browser
Unfortunately, IE up to version 8 (included) is cropping values even when the dropdown is opened, as shown below. Depending on the values you're showing in the dropdown and the width of your dropdown, this behavior may be just a minor inconvenience or could be fatal, in particular when two values in the dropdown differ only in the end of their text, which happens to be cropped.

On IE7/IE8, labels are cropped, which can be fatal to your web app 
A solution to this problem is to use JavaScript to increase the size of the dropdown when it is opened, setting its CSS width to auto; so it shows the full values:

JavaScript fix applied to IE7/IE8

Then, you set the width back to its original value when the dropdown is closed. This method works, until you hit a dropdown with a width: 100% for which labels are short, i.e. changing the width from 100% to auto makes the dropdown narrower instead of wider. If you're making the dropdown narrower and users click on a portion of the dropdown that isn't visible anymore after its width is adjusted, IE understandably "cancels" the user's click, and the dropdown doesn't open, which means the user will have to click a second time on the narrower dropdown to open it.

Your first instinct might be to fix this with a min-width: 100%. Unfortunately, bummer, min-width doesn't work on dropdowns with IE7/IE8. This means that we have to resort to another technique: use JavaScript to check if setting the width to auto would reduce the actual width of the dropdown, and in this case just leave things as they are. If this sounds somewhat convoluted, it is because it is! But I imagine that, at times, this is price we have to pay to properly support older browsers.

You can find the JavaScript for this, along with a test case, in this jsFiddle. At the moment, our thinking is that this is too much of a corner case for us to include this code by default in Orbeon Forms, but if this solves a problem for you, feel free to use it, with Orbeon Forms or elsewhere.

No comments:

Post a Comment