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

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

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: Combobox • Select • Listas • Javascript • Ajax • Ie6 •

Artículos relacionados:

• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• jQuery Alert Dialogs... reemplaza las alertas
• Detectar Android, iPad o iPhone con javascript, php o htaccess
• Tiny Scrollbar... la alternativa a jScrollPane para jQuery
• ListBox doble con filtro de búsqueda usando jQuery

100 Búsquedas de este artículo:

cambiar el tamaño del SELECT vía jQuery • select ancho fijo • ancho fijo select • tamaño select jquery • ancho select css • tamaño de un select con jquery • ancho select html • select tamaño fijo • jquery tamaño select • limitar el tamaño de un select en jquery • tamaño de select php • jquery cambiar lista de select • estilo select ancho fijo opciones de tamaño grande • css combobox texto • combos ancho fijo IE • jquery select tamaño • tamaño del select en exploerer • ancho de un select css • aumentar tamaño select css • internet explorer 8 no toma bien un select • select ancho autoajustable • html select ancho fijo • ancho de un select html • ajustar tamaño de lista de un select usando jquery • agrandar select en explorer • css ajustar ancho de select • css ancho texto • jquery Combos con ancho fijo en IE • cambiar el tamaño de un select css • select iexplorer tamaño • select ancho • como limitar el tamaño del select html con size=1 jquery • select explorer tamaño • ajustar ancho select form • estilo ancho select • limitar ancho select html • ancho de select html • ancho de un select • select html controlar el ancho • Adpatar contenido en un combobox en javascript • limitar el despliegue del select html css • select html ancho fijo scroll • tamaño select html internet explorer • longitud de un select jquery • scroll vertical automatico select html internet explorer • agrandar select css • tamaño select ie6 • select ie ancho fijo • jquery select ajuste size • tamaño select ie • texto ajustable al ancho css • css ajustar combobox • limitar tamaño de alto lista combo html • acortar textos largos con jquery • limitar ancho texto css • reducir el ancho de la lista de despliegue HTML • CSS ajustar texto select • javascript ejemplos ajustar tamaño texto en combos • javascript ajustar tamaño de contenido en combos • css ajustar contenido en combos • select con imagenes y texto en js • tamaño de un select en html • control ancho de listas de formulario • poner ancho fijo a un select • css ancho fijo select html • css select ancho lista • dar ancho a un combo con css • css cambiar tamaño option de select • como darle un tamaño fijo a un listado en php • poner tamaño fijo en jquery mobile • cambiar tamaño del select en jquery • cambiar el tamaño de un select con jquery • ajustar el tamaño de un select al contenido • limitar el ancho select css • anchos de combo box en ie y ff • select ancho fijo ie • ancho fijo para combo de texto en php • establecer tamaño fijo de un listbox en html • html select tamaño sin css • limitar tamaño de un combo • ancho de lista php • ancho del select • mysql select ancho fijo campo • select tamaño fijo IE • formulario select ancho • no se ve el texto completo del select en ie • ancho fijo select ie • select ancho explorer • saber tamaño select jquery • ancho texto css • tamaño <select> CSS • tamaño select css IE6 • jscrollpane ie width • ancho lista <select> • cambiar tamaño combo css • tamaño fijo combo html explorer 6 • formulario select lista opciones jquery • ancho combo ie • select jquery cambiar ancho • http://www martiniglesias eu/blog/listas-o-selects-con-ancho-fijo-deja-de-esconderme-texto-ie/23 •