Bootstrap 3 seleziona le opzioni tagliando

Question

C'è un modo per prevenire l'opzione "cut-off" su Bootstrap seleziona? Si prega di consultare il codice qui sotto e le immagini che seguono. La prima immagine mostra le opzioni visualizzate correttamente. La seconda immagine mostra le opzioni che si interrompono dopo aver ridimensionato la larghezza dello schermo per essere più piccola del testo dell'opzione.

Se non riesco a farlo tramite CSS, sto progettando di utilizzare jQuery per impostare la larghezza della casella di selezione uguale alla larghezza dell'opzione più grande se la larghezza dell'opzione è maggiore della larghezza di selezione.

<select class="form-control multiple" size="3"> 
    <option>test123 test123 test123 test123 test123 test123</option> 
    <option>test123 test123 test123 test123 test123 test123</option> 
</select> 

Answer 1

L'unica cosa che mi viene in mente è che, dal momento che i contenitori Bootstrap sono sensibili per natura, che stanno andando automaticamente a ridimensionare il <input> a seconda della dimensione attuale del browser. Date un'occhiata a questa struttura:

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <input type="text" class="form-control" value="I am a very, very, very, very, very, very long option. I'm going to extend off the screen."/> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <select class="form-control"> 
     <option value="1">I am a very, very, very, very, very, very long option. I'm going to extend off the screen.</option> 
     </select> 
    </div> 
    </div> 
</div> 

In questo esempio, se si ridimensiona la finestra più piccola, la larghezza della <input> e <select> si adatta alle dimensioni del contenitore è in <div class="col-xs-12">. Per evitare ciò, avremmo bisogno di utilizzare input a larghezza fissa, il che va contro l'utilizzo di un framework responsive come Bootstrap, ma in alcune situazioni posso vederne l'esigenza.

Alcuni suggerimenti da considerare:

• E 'possibile avere più piccole etichette di opzione?
• È il tuo <select> in un contenitore di larghezza massima?
• Potrebbe essere possibile utilizzare un <modal> per selezionare le opzioni se non c'è spazio?

E se tutto il resto fallisce, è sempre possibile creare una classe personalizzata <div class="col-xs-12 fixed"> e impostare la larghezza a qualcosa di statico, sia un valore di riferimento o, come si suggerito di usare jQuery per trovare il max-width del valore dell'opzione più lunga.

Spero che questo aiuti!