Ie6 select box width fix
I’ve looked high and low for a solution to ie 6’s problematic implementation of form select boxes. It would appear that select box width and the width of the option tags are inseparable. What this means is that if you set a width to the select-box there’s a good chance that some of the option text is going to be cropped. For sites with dynamic content, this leaves us only one solution… put the select box somewhere with lots of space.
As I’ve been unable to find a pure css I’ve resorted to Dom-Scripting for the answer.
To solve the the problem I’ve created a script which will allow you to use set widths for the select boxes. The code then dynamically resizes them when the user interacts with the select box. Once a selection has been made or the element has lost focus the select box is resized back to it’s original size. In order for the code to work there’s a few tricks that are going on with the positioning model to prevent the resizing from affecting other elements but hopefully these won’t be apparent.
This solution isn’t ideal but with few alternatives it could be the answer.
*note
It’s worth mentioning that I’ve seen other scripts which do practically the same thing, although all the one’s I’ve seen use one Framework or another. My solution is bare-bones, self contained, and unobtrusive. hope its useful.
Update
It’s worth pointing out that after testing this in the wild I’ve realised the css usually needs quiet a bit of attention to get it working as intended. At some point I hope to get this working straight out of the box, though my preference would be that poepl stop using ie 6 all together.