BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Listas o Selects con ancho fijo... deja de esconderme texto! (IE)

16/ENE/2009 17.337 visitas Ver comentarios
Listas o Selects con ancho fijo... deja de esconderme texto! (IE)

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Si alguna vez maquetaste un formulario con CSS y necesitabas, claro está, que el ancho de los objetos -campos de texto, selects, etc...- tengan un ancho fijo, sabrás que con declararle un width en tu hoja CSS bastaba.

Ahora bien,
Si le aplicaste un ancho fijo a los SELECT, y tuviste la mala suerte de que las opciones de esa lista se pasasen en tamaño del ancho declarado, comprobarás que en Explorer 6, 7 (y me imagino que todos los demás, aunque el 8 no lo probé aun) se esconde el contenido tal como se ve en la foto que hay aquí a la derecha.

Sabrás también, que en el resto de los navegadores "normales" como Firefox, Opera, Safari, Chrome, esto no pasa y que solo afecta al Explorer (cuando no...)

Pues bien,
Leo en css-tricks, que proponen varias soluciones tales como:

1) Incluir unas librerías que tiene Yahoo disponibles.

2) Utilizar los Behaviors como en este ejemplo...

3) Utilizar la opción de cambiar el tamaño del SELECT vía jQuery.

En las primeras opciones (1 y 2) con seguir los links encontrarás toda la información necesaria... en el caso de la opción 3, necesitarás, además de la librería jQuery, utilizar esta función que pego en código 1.

La idea,
es que al pasar el ratón por encima del SELECT, éste tome su ancho original y al quitar el ratón vuelva al ancho fijo.

Fuente: css-tricks.

Código 1 - JAVASCRIPT
$(function() {
$(".ProductAttributesSelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018