Select con ancho fijo para Internet Explorer

en jquery css publicado el 02 de agosto 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 agosto 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.

¿Pensando en contratar mis servicios?

Lee esto

Algunos apuntes que te pueden resultar útiles:

  • Soy programador web y aunque me encantaría diseñar, no entra dentro de mis competencias. Para poder desarrollar una página web necesito el diseño gráfico final. Si no conoces a ningún diseñador te puedo recomendar alguno con el que haya colaborado y su trabajo me haya parecido bueno.
  • No soy especialista SEO, aunque uso reglas básicas y sentido común a la hora de estructurar el contenido lo que se traduce en una mejora en el posicionamiento.
  • Si es posible envíame toda la información que creas que necesite para presentarte un presupuesto. "Programar una web como esta" no es suficiente, no podré evaluar el coste porque no sabré que funcionalidades tiene. Necesito que me las especifiques.
  • Si el proyecto es de gran envergadura, seguramente que te pida cuál es tu presupuesto. La razón es que si se aleja mucho de lo que a primera vista considero puede costar, te contestaré enseguida que no es un trabajo que pueda hacer.
  • Si existe una fecha de entrega del proyecto, comunícamela. En función de mi disponibilidad te contestaré si es un trabajo que pueda hacer o no.

Para contactarme puedes usar el formulario de contacto.