Consigli per le voci del menu a discesa che sono troppo larghe?

Question

Quali tipi di opzioni sono disponibili quando un menu a discesa viene visualizzato con un testo così ampio che non è possibile estendere la larghezza del menu per adattarlo? cioè rompe il layout della pagina, o sembra troppo brutto se il menu a discesa è regolato per adattarsi all'elemento lungo.

Troncamento? Troncamento più testo hover completo? Non consentire articoli lunghi?

Chiunque ha trovato soluzioni eleganti a questo?

Grazie.

Answer 1

Sono d'accordo con GordonB per quanto riguarda il troncamento delle opzioni. Opzioni troppo lunghe possono essere difficili da leggere e, come hai detto, sembra orribile.

Se il menu a discesa viene compilato dall'input dell'utente, tuttavia, limiterò la lunghezza. Cosa si può dire con 15 parole dovrebbe essere detto con 5 ... se non può, allora forse un menu a discesa non è la scelta migliore.

Ad esempio, se le opzioni sono i titoli dei documenti di ricerca e dei loro autori, è probabile che si abbrevino a poche parole chiave ("Teoria delle stringhe e You [Brown 2008]"). D'altra parte, se le opzioni stesse differiscono solo di poche parole e perdono significato se vengono troncate (ad esempio un elenco di opzioni come "Burro di arachidi e sandwich di gelatina d'uva con bastoncini di carota e latte di soia" e "Burro di arachidi e gelatina di mirtilli rossi" sandwith con bastoncini di carote e il 2% di latte ") forse sarebbe meglio servire visualizzando tutte le opzioni in sequenza, accompagnate da una casella di controllo o un pulsante di opzione, a seconda dei casi.

(Se si utilizza ASP.NET, in fondo sto dicendo utilizzando un ripetitore posto di un DropDownList)

Questo secondo approccio potrebbe anche permettere di incorporare altri elementi che non si sarebbe in grado di in un menu a discesa. Dai un'occhiata a this Amazon search result page per le idee.

Answer 2

Utilizzo il controllo commerciale ASP.NET implementato utilizzando <div> anziché <selezionare>. In questo modo potremmo inserire elementi multilinea su di esso, modellarlo come volevamo e fare altre cose.

Answer 3

troncamento con suggerimento sarebbe la mia scelta ....

L'ultima volta che ho dovuto fare questo ho usato un controllo Telerik, che era abbastanza UI ricco.

Answer 4

La maggior parte dei browser mostra le opzioni a larghezza intera indipendentemente dalla larghezza effettiva del menu a discesa mentre IE le ritaglia sulla larghezza della casella di selezione. Quindi il problema è davvero specifico del browser.

Ho creato una soluzione utilizzando il posizionamento assoluto nel menu a discesa in modo da poter estendere la sua larghezza al passaggio del mouse in IE senza interrompere il layout. Un po 'hacky ma è un'opzione.

Answer 5

Dipende da quanto si sta parlando, dal contesto. Spesso questo si riduce a un problema di progettazione piuttosto che a un problema di codifica. Se il testo è molto lungo, si avranno problemi di usabilità indipendentemente dal fatto che leggere un testo lungo in un menu a discesa è difficile. Le mie opzioni sarebbero:

Se il menu a discesa è molto stretto e gli elementi più lunghi non sono molto lunghi (ad esempio 3-4 parole), modificare il progetto per adattarlo.

Se il testo è molto lungo (ad esempio, le frasi), troncarlo se possibile.A volte il testo non è suscettibile di questo (ad esempio potresti finire con più oggetti con lo stesso testo). Non è possibile inserire le descrizioni dei comandi su determinati elementi dell'elenco.

Se il testo è molto lungo e non può essere troncato, è consigliabile prendere in considerazione un'opzione di interfaccia utente diversa.

Answer 6

Dare all'elemento una larghezza massima con CSS property max-width.

Answer 7

Mi rendo conto che sono abbastanza tardi a questa domanda, ma ho cercato una risposta e forse ho trovato una soluzione abbastanza elegante.

Date un'occhiata qui:

• http://www.getharvest.com/blog/2009/12/dropdown-problems-on-internet-explorer/
• http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

I link di primo parla di un paio di soluzioni prima di consigliare una soluzione basata sul secondo link.

L'idea è che al clic si modifica la larghezza del tag <select> in modo che sia abbastanza grande da mostrare il testo completo delle opzioni. Mantenendo il tag <select> all'interno di un div con l'overflow impostato su "nascosto", non si confonde con il resto della pagina.

Provalo - è una soluzione piuttosto buona.

Answer 8

Perché non creare un campo calcolato basato sul campo lungo. Crealo solo per essere solo i primi 50 (ad esempio) caratteri.

= SINISTRA ([titolo], 50)

quindi fare riferimento a quel campo nel menu a discesa.