un modo per dire se le opzioni non si adattano all'interno di un select - in IE

Question

In IE6, e possibilmente 7, se si imposta la larghezza di un valore su qualsiasi altro allora auto, se le opzioni all'interno di tale selezione sono più larghe di la larghezza della selezione, vengono tagliati. questo non va bene. Firefox è abbastanza intelligente da non farlo.

Domanda: Come posso sapere se le opzioni vengono troncate con javascript?

In che modo hai risolto questo problema, quindi impostando la larghezza su Auto?

Answer 1

Buona domanda. Un po 'di sfogo qui, ma l'implementazione di IE dei controlli <select> è abissale. Ha i seguenti problemi (tra gli altri ne sono sicuro):

• (Come avete notato) impostando la larghezza sulle <select> interrompe <option> elementi, a prescindere dalla overflow istruzioni
• hanno questo magic ability to sit overtop of all other controls on the page, indipendentemente dalla posizione e dalle istruzioni di stratificazione (z-index). Questo è stato un enorme PITA per i primi sviluppatori di widget di "dialogo"; eventuali elenchi a discesa dietro la finestra di dialogo si espandono attraverso il overtop del dialogo stesso.
• you cannot disable individual <option> elements
• you cannot hide/show individual <option> elements
• il <select> non riflette gli stili CSS impostate sulla selezionata <option>
• can't set the innerHTML property to a string of new option items
• se fate non impostare un attributo value su ogni <option>, mySelectBox.value fallisce silenziosamente
• quando si utilizzano le frecce della tastiera per navigare attraverso l'elenco di <option> elementi, i change generato l'evento su ogni battitura (Opera ha anche questo problema)
• stili CSS su <option> s e <optgroup> s sono generalmente completamente ignorate (only backgound-color and color work)
• programmazione modificando la lista delle opzioni nasconde la discesa (che schifo per tentativi di implementazione "type ahead" che desiderano che il menu a discesa rimanga visibile)
• IE7 tenta di adattare tutte le opzioni sullo schermo quando viene visualizzato. Per elenchi di grandi dimensioni questo significa che il contenuto di discesa siederà overtop del dropdow quando indicato (questo di per sé non è sbagliato, ma è incompatibile con le altre versioni di IE)

quanto riguarda il tuo problema, una soluzione è quella alternare il width per "auto" quando le opzioni sono mostrate, e fissati se torna ad una larghezza insieme quando le opzioni sono chiuse, come descritto qui: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

lo svantaggio evidente di questo è che le viti il ​​flusso del documento tutti gli elementi vicini si spostano per tenere conto dell'impostazione width:auto.

Answer 2

Dai un'occhiata a this post di Chris Coyier.