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

Escrito por: el 16-01-2009 09:10:09 y leído 2391 veces

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"));
        });

});

Categorías: ComboboxSelectListasJavascriptAjaxIe6

Artículos relacionados:


100 Búsquedas de este artículo:

cambiar el tamaño del SELECT vía jQueryselect ancho fijoancho fijo selecttamaño select jqueryancho select csstamaño de un select con jqueryancho select htmlselect tamaño fijojquery tamaño selectlimitar el tamaño de un select en jquerytamaño de select phpjquery cambiar lista de selectestilo select ancho fijo opciones de tamaño grandecss combobox textocombos ancho fijo IEjquery select tamañotamaño del select en exploererancho de un select cssaumentar tamaño select cssinternet explorer 8 no toma bien un selectselect ancho autoajustablehtml select ancho fijoancho de un select htmlajustar tamaño de lista de un select usando jqueryagrandar select en explorercss ajustar ancho de selectcss ancho textojquery Combos con ancho fijo en IEcambiar el tamaño de un select cssselect iexplorer tamañoselect anchocomo limitar el tamaño del select html con size=1 jqueryselect explorer tamañoajustar ancho select formestilo ancho selectlimitar ancho select htmlancho de select htmlancho de un selectselect html controlar el anchoAdpatar contenido en un combobox en javascriptlimitar el despliegue del select html cssselect html ancho fijo scrolltamaño select html internet explorerlongitud de un select jqueryscroll vertical automatico select html internet exploreragrandar select csstamaño select ie6select ie ancho fijojquery select ajuste sizetamaño select ietexto ajustable al ancho csscss ajustar comboboxlimitar tamaño de alto lista combo htmlacortar textos largos con jquerylimitar ancho texto cssreducir el ancho de la lista de despliegue HTMLCSS ajustar texto selectjavascript ejemplos ajustar tamaño texto en combosjavascript ajustar tamaño de contenido en comboscss ajustar contenido en combosselect con imagenes y texto en jstamaño de un select en htmlcontrol ancho de listas de formularioponer ancho fijo a un selectcss ancho fijo select htmlcss select ancho listadar ancho a un combo con csscss cambiar tamaño option de selectcomo darle un tamaño fijo a un listado en phpponer tamaño fijo en jquery mobilecambiar tamaño del select en jquerycambiar el tamaño de un select con jqueryajustar el tamaño de un select al contenidolimitar el ancho select cssanchos de combo box en ie y ffselect ancho fijo ieancho fijo para combo de texto en phpestablecer tamaño fijo de un listbox en htmlhtml select tamaño sin csslimitar tamaño de un comboancho de lista phpancho del selectmysql select ancho fijo camposelect tamaño fijo IEformulario select anchono se ve el texto completo del select en ieancho fijo select ieselect ancho explorersaber tamaño select jqueryancho texto csstamaño <select> CSStamaño select css IE6jscrollpane ie widthancho lista <select>cambiar tamaño combo csstamaño fijo combo html explorer 6formulario select lista opciones jqueryancho combo ieselect jquery cambiar anchohttp://www martiniglesias eu/blog/listas-o-selects-con-ancho-fijo-deja-de-esconderme-texto-ie/23

Traduce esta página

Nube de Tags

Libros de Romantica

Los 20 posts más populares

Usuarios Conectados...

  • Hay 11 usuario/s en esta página
¿Sabías qué?
Yo digo
Miembro de

BlocketPCSubflashADWE

© 2012 Martin Iglesias - Todos los derechos reservados

Creative Commons LicenseValid XHTML 1.0 Transitional¡CSS Válido!Suscribete a mi RSSHumans TXT