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|
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.
Post a Comment