Miguel Monreal Ordiñana

Solución a los combos (select) cortados con ancho fijo en internet explorer 6/7

Posted on: octubre 28, 2007

Update 28/11/2007: Añadido un ejemplo. Además me dí cuenta que en lugar de utilizar 3 librerias js sueltas existe una que aglutina las 3, por lo que en lugar de hacer 3 peticiones http haremos 1 ;)

Posiblemente quien tenga en su poder una flamante Xbox 360 pensará que Microsoft va llenando de gozo al mundo. Esa falsa percepción terminará si comienza a programar en web y ve como en firefox,opera,etc. todo va ok mientras que en cualquier internet explorer(6 o 7) siempre surgen problemas.Uno más a sumar es el distinto comportamiento entre Firefox e IE cuando defines un combo con una anchura fija (por ejemplo 200px) y alguna opción del desplegable supera ese ancho:

Vista en Firefox o cualquier otro navegador compatible:

Select con tamaño fijo en Firefox, Opera

Vista en IE 6/7

Imagen select con tamaño fijo en IE.

(Fuente: www.opobusca.com)

Hasta ahora las soluciones que conocía eran 2:

1ª opción: Utilizar los eventos onclick y onblur. En el evento onclick(cuando se haga click) indicaremos que la anchura sea automática, es decir que ocupe el ancho de la option más larga. Por contra en el evento onblur(pérdida del foco) volveremos a indicar que el select ocupe de ancho 100px;

<select onclick=”this.style.width = ‘auto’;” onblur=”this.style.width = ’100px’;” style=”width:100px;”>
<option>Opcion corta</option>
<option>Opcion mas larga</option>
<option>Opcion mucho mucho mucho mucho mucho mas larga</option>
</select>

El problema de esta solución es que puede acabar con nuestro layout, es decir, al expandirse el combo hasta un ancho no determinado puede provocar que la flotabilidad de los divs se vaya al garete y ocurran “movimientos” de divs.

2ª opción: Simplemente dejar que el select ocupe el ancho más grande no limitando su ancho.

Ninguna de estas soluciones me convencían, pero el otro día encontré este enlace de yahoo 360 (Ver con IE) en este blog.

La solución es perfecta, el select se expande pero no destroza el layout. Quizá lo unico a mejorar es la documentación porque simplemente te remiten a que veas el código fuente y hay algún detalle que puede pasar desapercibido.Vamos paso a paso.

Partimos de un select con tamaño fijo de 200px(podría ser también una clase). Omitimos los option por cuestión de espacio:

<select style=”width:200px”></select>

1. Lo primero de todo es descargarse las librerías javascript necesarias:

ie-select-width-fix.js

Para usar esta librería es necesario bajarse Yahoo User Interface Library (YUI)
No es más que una serie de librerías js que facilitan la creación de controles web, gestión llamadas AJAX crossbrowser, menús, etc. En general utilidades para insertar fácilmente controles en tu web.

No asustarse porque de todas las librerías que contiene el zip solo es necesaria una libreria llamada yahoo-dom-event.js

Importaremos por lo tanto las 2 librerías javascript

2. Indicaremos un id al select, por ejemplo s1.

<select id=”s1″ style=”width:200px;”></select>

3. Envolveremos al select con un span que tenga como clase textualmente select-box.

(no hay que definir este estilo en nuestra css)

<span class=”select-box”><select id=”s1″ style=”width:200px;”></select></span>

4. Es necesaria la siguiente línea javascript (entre marcas de script):

new YAHOO.Hack.FixIESelectWidth( ‘s1′ ); // siendo s1 el nombre del combo

Y ya está!! Ejemplo online

Simplemente anotar que en Firefox, Opera, etc no tiene efecto y que puede hacerse en todos los combos que se desee.En caso de duda ver el código fuente del ejemplo online.

En el siguiente post comento que modificación es necesaria hacer para conseguir esta funcionalidad en combos que son cargados por AJAX.

About these ads

7 comentarios hacia "Solución a los combos (select) cortados con ancho fijo en internet explorer 6/7"

Un ejemplo espectacular para un problema realmente molesto. Enhorabuena por la documentación del problema.
s2.

Una solución muy util y muy bien documentada que seguro que es de mucha ayuda, porque este problema hace que muchas veces tengas que acortar los nombres de los combos para directamente evitar estas situaciones, pero cuando no es posible hacerlo esta me parece la mejor solución… eres bueno, chaval.

Muy buena solución. Un buen truco que nos va a sacar de más de un aprieto.
La he comentado en mi blog, espero que no te importe.

[...] con ancho fijo en IE (II parte) 28 11 2007 Completando con el post anterior, que además acabo de actualizar con una mejora y un ejemplo, vamos a ver como se puede seguir [...]

Hola estoy trabajando para crear una pagina web y me pidierón lo siguente.

Qué sea de igual manera que opera, firefox y IE. Y que el tamaño sé adapte para todas las resoluciones.

Estó hacido nuevo para mí, por ello me alegro de encontrar esté wordpress esperó que me digas o sepas como.

Saludos!

muy bueno el post… el unico problemita que le vi., sorry por lo exigente se que no deberia jeje… pero cuando uno pasa encima debe hacer click en otro lado para que se quite el ancho especifico o es que falta algo adicional del ejemplo que mostrastes jeje debo meterle lupa a ver.. pero no hay tiempito pa’ eso jeje
lo dejare asi mientras!!! muy buena explicación por cierto

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: