Limite Larghezza iniziale della lista di selezione

Question

Ho una lista di selezione, in cui alcuni clienti hanno inserito per loro opzioni incredibilmente lunghe, che interrompono il progetto. Mi chiedo se c'è un modo per impostare una larghezza fissa sul widget di selezione, ma il menu a discesa che è ancora disponibile è comunque abbastanza ampio da visualizzare tutte le opzioni.

Answer 1

Non sono sicuro se siete aperti a utilizzare jQuery a tutti, ma io di solito utilizzare questo metodo:

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

è un po 'mosso ma sembra meglio di tagliare il contenuto

Answer 2

See the working example here.

Hai solo bisogno di applicare width alla vostra casella di selezione in linea o CSS. Sarà largo come hai specificato ma quando cliccato, mostrerà tutte le opzioni con qualsiasi larghezza.

Answer 3

Non so se si può fare con i CSS (indipendente dal browser), ma qui ci sono 2 altre soluzioni:

1. Invece di visualizzare "veeeeery looooooooooong teeeeeeeeext" è possibile visualizzare qualcosa come "veeeeery loooo. .. ";

2. Costruisci la selezione utilizzando div e liste in modo che quando è chiusa abbiano una larghezza specifica e quando si preme qualcosa come una freccia per visualizzare la larghezza completa. (Non sono sicuro che tu capisca cosa sto cercando di dire con questo ....).

Answer 4

Se il l'elenco che hai (le voci in <select>) sono immesse dall'utente e l'utente può inserire, diciamo 500 caratteri, che definiranno sicuramente.

In questo caso, non andrei per un elenco <select>, ma un elenco personalizzato creato con, ad esempio un <div>.

Questo non è difficile, tutto ciò che serve è

un div che contiene l'opzione predefinita ,
un div nascosto con tutte le opzioni
Quando l'utente fa clic l'opzione predefinita mostrano il div nascosti
al clic degli elementi nel div nascosto (che ora è visibile) fanno che l'elemento selezionato nel primo div

ci

Forse già plugin jquery per questo. ma non sono sicuro che tu sia aperto a jquery, non sono comunque un esperto di jquery.

Conosco questo sforzo comparativamente più di quello di avere un select, ma penso che valga la pena. Tutti gli hack - espandi il div onmouseover, onclick ecc non sembra grandioso, potrebbe ancora infrangere il tuo progetto e, a seconda della quantità di dati che l'utente può inserire, non sarebbe comunque efficace.

Nell'approccio elenco personalizzato, è possibile racchiudere gli elementi, in modo da avere il controllo completo.

Answer 5

aggiungere al CSS qualcosa di simile a questo:

select { 
    border: 1px solid #838383; 
    border-style: outset; 
    font-weight: bold; 
    color: #3F3F3F; 
    max-width: 150px !important; 
    overflow: hidden; 
} 

option { 
    max-width: 120px !important; 
    overflow: hidden; 
} 

Questo funziona per me. Nota: ci sono no punti davanti alle ancore.

Answer 6

Poiché non si specifica il supporto del browser necessario, questa può essere o meno una soluzione. Funziona nella maggior parte dei browser IE9 +

select { 
    width: 100%; 
    max-width: 150px; 
} 

Breve e dolce. Quando espanso, il select mostrerà l'intero testo (a meno che non superi la finestra!).