Arreglando anchura y visualización en el jQuery UI Multiselect widget

Cuando estás desarrollando interfaces web, el uso de listas <select> es algo básico. En algunos casos no sólo hace falta elegir un valor, por ejemplo, ¿cuál es tu país de nacimiento? Sino que hace falta elegir más de uno de forma simultánea, las llamadas listas <select> con el atributo múltiple. Un ejemplo que se me ocurre es: ¿qué categorías quieres elegir de esta lista?

El interfaz estándar para estos casos es bastante “feo” y poco usable. Por eso mismo hay multitud de alternativas para mejorarlo y una que uso frecuentemente es jQuery UI Widget Multiselect. Si entráis en el enlace veréis que tiene características muy interesantes y es una buena alterantiva a Chosen (la que usa WooCommerce internamente), otra herramienta similar que también uso muy a menudo.

Problema de anchura y visualización

Es posible que si lo usáis tengáis un problema que podríamos relatar como sigue:

El ancho del widget parece infinito, reviso toda la parte de JavaScript y parece correcta. De hecho me mosqueo todavía más cuando veo que las opciones han desaparecido, de forma que ahora sólo aparecen al pasar el ratón por encima.

Solución

La solución es muy simple y aunque me costó encontrarla un poco, por eso la comparto por aquí para que no tardéis lo mismo que yo, si el <select> que da lugar al jQuery UI Multiselect widget no tiene definida anchura, tenemos este problema, por lo que sólo tendremos que cambiar:

<select id=”mi_lista” multiple>

Por esto:

<select id=”mi_lista” multiple style=”width:330px”>

Con esto tendríamos el problema resuelto. ¿Has probado alguna vez este widget? Espero tus comentarios.