2009-02-25 4 views
7

¿Qué tipo de opciones tengo cuando un menú desplegable se enfrenta a un texto que es tan amplio que no es posible ampliar el ancho del menú para acomodarlo? es decir, rompe el diseño de la página, o simplemente se ve muy feo si el menú desplegable se ajusta para ajustarse al elemento largo.¿Recomendaciones para los elementos del menú desplegable que son demasiado amplios?

Truncamiento? Truncamiento más texto de desplazamiento total? ¿No permite elementos tan largos?

¿Alguien ha encontrado alguna solución elegante para esto?

Gracias.

Respuesta

1

Estoy de acuerdo con GordonB con respecto a truncar las opciones. Las opciones excesivamente largas pueden ser difíciles de leer y, como mencionaste, se ven horribles.

Si su menú desplegable se llena a partir de la entrada del usuario, sin embargo, restringiría la duración. Lo que puede decirse con 15 palabras debe decirse con 5 ... si no puede, entonces tal vez un menú desplegable no sea su mejor opción.

Por ejemplo, si sus opciones son los títulos de los trabajos de investigación y sus autores, probablemente pueda abreviarlos con unas pocas palabras clave ("Teoría de Cuerdas y Usted [Brown 2008]"). Por otro lado, si las opciones difieren solo en unas pocas palabras y pierden significado si se truncan (por ejemplo, una lista de opciones como "Mantequilla de maní y sándwich de gelatina de uva con zanahorias y leche de soja" y "Mantequilla de maní y jalea de menta" sandwith with carrot sticks and 2% milk ") tal vez sería mejor que te mostraras todas las opciones de forma secuencial, acompañadas de una casilla de verificación o un botón de opción, según corresponda.

(Si está utilizando ASP.NET, básicamente lo que digo se utiliza un repetidor en lugar de un DropDownList)

Este segundo enfoque puede ser que también le permiten incorporar otros elementos que no sería capaz de en un menú desplegable. Eche un vistazo a this Amazon search result page para obtener ideas.

+0

Gracias! El texto desplegable proviene de la entrada del usuario, por lo que, salvo un destello de perspicacia, parece que tendré que usar la restricción de truncamiento o longitud ... o ambas cosas. – ntownsend

0

He estado utilizando el control comercial ASP.NET que se implementa utilizando <div> en lugar de >. De esta forma podríamos ponerle elementos multilínea, diseñarlo como quisiéramos y hacer otras cosas.

3

truncamiento con información sobre herramientas sería mi elección ....

La última vez que tuve que hacer que utilicé un control telerik, que era bastante rica interfaz de usuario.

1

La mayoría de los navegadores muestran las opciones a todo lo ancho, independientemente del ancho real de la lista desplegable, mientras que IE los recorta al ancho del cuadro de selección. Entonces, el problema es realmente específico del navegador.

He hecho una solución usando el posicionamiento absoluto en el menú desplegable para poder extender su ancho al pasar el mouse sobre IE sin romper mi diseño. Un poco raro, pero es una opción.

0

Depende de qué tan amplio está hablando, cuál es el contexto. A menudo, esto se reduce a un problema de diseño más que a un problema de codificación. Si el texto es realmente largo, tendrá problemas de usabilidad independientemente, porque leer texto largo en un menú desplegable es difícil. Mis opciones serían:

Si el menú desplegable es realmente estrecho y los artículos más largos no son muy largos (por ejemplo, 3-4 palabras) cambie el diseño para acomodarlo.

Si el texto es muy largo (por ejemplo, oraciones), trunque si puede.A veces, el texto no es susceptible de esto (por ejemplo, puede terminar con varios elementos con el mismo texto). Realmente no se puede poner información sobre herramientas en elementos seleccionados de la lista.

Si el texto es muy largo y no se puede truncar, es posible que desee considerar una opción de IU diferente.

7

Me doy cuenta de que llegué bastante tarde a esta pregunta, pero he estado buscando una respuesta y es posible que haya encontrado una solución bastante elegante.

un vistazo aquí:

Los primeros enlace habla de un par de soluciones antes de recomendar una solución basada en el segundo enlace.

La idea es que al hacer clic, cambie el ancho de la etiqueta <select> de manera que sea lo suficientemente grande como para mostrar el texto completo de las opciones. Al mantener la etiqueta <select> dentro de un div con el desbordamiento establecido en 'oculto', no se atornilla con el resto de la página.

Pruébelo: es una solución bastante buena.

+0

La solución de ese segundo enlace funcionó muy bien para mí. Añadiría que necesita dejar fuera el atributo onBlur para que esto funcione correctamente en IE8. – techpeace

+0

La sugerencia del segundo enlace funcionó en IE8 sin necesidad de eliminar onBlur. –

0

¿Por qué no crear un campo calculado que se basa en el campo extenso. Solo créelo para que sea solo los primeros 50 caracteres (por ejemplo).

= LEFT ([Título], 50)

después hacer referencia a ese campo en el menú desplegable.

Cuestiones relacionadas