Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

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

Escrito por: Martín el 16-01-2009 09:10:09

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

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 JAVASCRIPT

$(function() {

    $(".ProductAttributesSelect")

        .mouseover(function(){
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto");
        })

        .mouseout(function(){
            $(this).css("width", $(this).data("origWidth"));
        });

});