Select con ancho fijo para Internet Explorer

in jquery css published the 02 de August de 2010

selectfixedwidth es un plugin jQuery que intenta resolver el problema de las listas desplegables <select> de ancho fijo con opciones que superan ese ancho para Internet Explorer.

Mientras que en todos los navegadores más populares (Firefox, Chrome, Opera, Safari) al seleccionar la lista, el ancho de las opciones se adapta automáticamente, Internet Explorer, incluso en su versión más reciente, no lo hace, con lo cual parte del texto queda cortado y crea un grave problema de usabilidad.

Demo Descargar

¿Cómo funciona?

Lo primero que hay que hacer es incluir las librerías para jQuery y para el plugin en la cabecera <head> del documento html.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.selectfixedwidth.js"></script>

Y después indicar para qué listas desplegables se quiere utilizar el plugin.

<script type="text/javascript">
$(document).ready(
  function() {
    $("select.fixedwidth").selectfixedwidth();
  }
);
</script>

Opciones

El plugin únicamente tiene una opción de configuración. Se trata de un timeout interno que por defecto tiene el valor de 300ms. Si el plugin no se comporta como debería, se puede cambiar ese valor de la forma siguiente:

$("select.fixedwidth").selectfixedwidth({timeout: 1000});

Navegadores soportados

El plugin únicamente funciona para Internet Explorer. Para cualquier otro navegador no tendrá efecto. Las versiones soportadas son a partir de la 7.

1 comentario

Pedro Garcia
18 de August de 2012

Hola Albert. Tengo ese problema con el ancho de las listas y te agradecería mucho que me explicases el funcionamiento del plugin, ya que no soy programador profrsional. Tengo descargados los archivos jQuery y también el archivo de tu plugin. He incluido las llamadas en el 'head' del documento donde voy a utilizarlo, pero no entiendo la parte de codigo que sirve para 'indicar para qué listas desplegables se quiere utilizar el plugin'. Muchas gracias de antemano.

Web developerBarcelona