Select con ancho fijo para Internet Explorer

en jquery css publicat el 02 de agost 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 agost 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.

Pensant en contractar els meus serveis?

Llegeix això;

Alguns apunts que et poden resultar útils.

  • Soc programador web i encara que m'encantaria dissenyar, no entra dins de les meves competències. Per poder desenvolupar una pàgina web necessito el disseny gràfic final. Si no coneixes a cap dissenyador puc recomanar-te'n algun amb el que hagi col·laborat i la seva feina m'hagi semblat bona.
  • No soc especialista SEO, encara que faig servir regles bàsiques i sentit comú a l'hora d'estructurar el contingut el que es tradueix amb una millora en el posicionament.
  • Si es possible, envia'm tota la informació que creguis que necessito per preparar-te un pressupost. "Programar una web com aquesta" no es suficient, no podré avaluar el cost per que no sabré quines funcionalitats te. Necessito que les especifiquis.
  • Si el projecte es de gran envergadura, segurament que et demani quin es el teu pressupost. La raó es que si s'allunya molt del que a primera vista considero pot costar, et contestaré de seguit que no es un treball que pugui fer.
  • Si existeix una data d'entrega del projecte, comunica-me-la. En funció de la meva disponibilitat et contestaré si es un treball que pugui fer o no.

Per contactar-me pots utilitzar el formulari de contacte.