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

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:

Vista en IE 6/7

(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.