Problemas con los select en IE
Thursday, June 25th, 2009Internet Explorer tiene un bug que cabrea bastante cuando le pasa a uno, éste afecta a los select. Cuando tenemos una lista de opciones de distinto ancho, es más que probable que si navegamos con IE se nos corten las opciones más largas, no adaptándose la etiqueta a éstas.
Pues bien, nuestro amigo Alberto nos envía in tip en el que se desarrolla un JS para que esto no suceda. Transcribo desde css-tricks.com ¡Espero que os solucione más de un quebradero de cabeza!
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!
