Select Cuts Off Options In IE (Fix)
I think the problem is fairly obvious here. If you set a static width on the <select> element, any <option> elements that are wider get cut of in IE 7 and below. There is no good CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.
- Yahoo! has a fix in their libraries. But I’m already using jQuery, didn’t want to add a bunch of extra libraries I don’t need most of.
- There is a solution with JavaScript applied via CSS behavior expressions. But those freak me out, and I was seeing major problems when I tried this (whole page didn’t want to load).
- You can use some inline JavaScript to alter the width on click. This is closer to what I want, but of course inline JavaScript is usually bad news.
What I Did
I decided the best way to handle it is to keep the static width on the select element by default, but when moused over in IE, change the width to “auto” to accommodate. And then of course put it back to static width when moused out. I was already using jQuery so:
$(function() {
$(".ProductAttributesSelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});In plain English:
- When mouse pointer goes over select element, keep track of the original width, then set it to “auto”.
- When mouse pointer leaves, set width back to original width.
Of course, only IE 7 and lower need this, so I apply the script via IE conditional comments. Thanks to Jason Huck for reminding me to use the data function (I was setting the rel attribute to save the data before, old school style). And all the folks on Twitter for the ideas!
Nice! Ive always had this issue on our ecommerce site, Im gna give this a try!
Nice job. Love the touch of jQuery to make it work.
Will this still work if a user is navigating with their keyboard? Seems like the use of .mouseover would limit this to just mouse users?
Maybe .onfocus would work better?
Nice work, but unfortunately this is not accessible since it requires JS. To my understanding there is no “real” accessible fix for this or am I wrong?
Not that I can find… JS is the closest thing I could come up with.
Great little trick. I have had this problem in the past, and now I know how to fix it!
-Brenelz
Yes! I’ve had this happen to me a bunch of times and it’s super annoying, but I never had the patience to actually work out a fix, haha.
One question – when you set the width of the select to auto on mouseover, that makes the entire box and dropdown wider, right? So wouldn’t that push nearby elements around and potentially mess up your page?
I agree. This could be a problem for IE layouts. My thought is maybe the element could be “floated” in some way… like temporarily hovered (with position absolute/relative) and some underneath element to help keep the original size reserved, that way it could “grow” and overlay anything around it when focused, but would not affect (other than to cover up) any content around it when doing so (much in the same vein as the drop-down part itself already does).
Ahh a great fix indeed :) I shall note this one down lol
Why not use the min-width attribute of CSS instead of the width attribute? Seems like it’d accomplish the same thing, except it’ll work on IE with JavaScript turned off too.
IE 6 don’t do min-width =)
Ah, of course. I missed the “and below.” And it is a nice fix. :-)
Then again, there’s a JavaScript-solution to IE6′s lack of min-width support:
http://javascript.about.com/library/blwidth.htm (other JS solutions are also available on the net).
If you could implement that instead, you’d be able to use min-width more everywhere ;)
Great fix indeed!
glad you found a fix, and thanks for sharing it. This bug is so annoying, I am surprised it doesn’t get more attention.
I saw your post on twitter and wanted to point you to the hedgerwow site, but than you had a solution before I found the bookmark… did you try it with really long options though? It was flickering a lot on my quick test (might be another reason for that, haven’t had the time to thorougly test yet).
You write
Of course, only IE 7 and lower need this
Unfortunately this is still in IE8, isn’t it?
How frustrating…
As of IE8 RC1 the select issues has been fixed and works the same as all those good browsers.
Good fix. I am gonna try to re-write this in mooTools and send over the code to you.
This kind of thing makes me mad. I am tired of having to provide hacky JavaScript fixes or conditional style sheets just for IE! But a very nice article, Chris!
Hey
just a suggestion, you could implement jQuery’s ‘hover’ here.. It takes a mouseover as first function arguement and mouseout as second.
it doesn’t really work for me. Select does resize on mouse over and out but when I try to select an option I lose the whole thing (it looks like it does not believe mouse is still over the select), anyone knows what am I doing wrong or maybe someone has similar problem?
I am also seeing the same behaviour.
Exactly the same for me IE7 , anyone got this working?
Instead of using .mouseout, I used .change — it keeps the size of the select box from reverting until an option is selected.
Ditto here.
unless im doing something wrong, everytime the mouseover event is fired i get this error in firebug
$(this).data(“origWidth”, $(this).css(“width”)).css is not a function
any ideas
thanks!
Better yet: Chris, can you post a demo please?
Thanks.
is that possible to resize just the List and no the select just like Firefox when we open the select ?
Not that I know of. That’s the problem here.