Come nascondere l'overflow su select2?

Sto utilizzando l'eccellente controllo jQuery select2.
Sto tentando di simulare un layout di visualizzazione a 3 celle, utilizzando il layout div di CSS.
Quando il valore selezionato è maggiore della larghezza di selezione2 corrente, il controllo normalmente nasconde il trabocco con un'ellissi. Con il mio layout, il controllo select2 mostra l'intero testo e salta fuori dai limiti del div "table". Vorrei invece nascondere l'overflow - c'è un modo per farlo? E non mi oppongo a scappare completamente il display: design del tavolo (a meno che non sia per un tavolo reale).Come nascondere l'overflow su select2?

Miniera fa questo:

enter image description here

E io voglio fare questo:

enter image description here

voglio che per riempire lo spazio disponibile e non di più. Nota: dispongo di un contenitore 500 px per replicare il problema, ma in pratica si tratta di un contenitore percenatge e il problema si verifica durante il ridimensionamento delle finestre.

<link href="http://ivaynberg.github.io/select2/select2-3.3.2/select2.css" rel="stylesheet"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script src="http://ivaynberg.github.io/select2/select2-3.3.2/select2.js"></script> 


    <style> 
     .container { width: 500px; margin: 0 auto; border: 5px solid black; } 

     .table { 
      display:table; 
      width: 100%; 
     } 
     .table-row { 
      display: table-row; 
      width: 100%; 
     } 
     .left, .right { 
      display:table-cell; 
      width: 100px; 
      background-color: green; 
     } 
     .mid { 
      display:table-cell; 
      width: 100%; 
      background-color: red; 
     } 
     .mid > * { 
      width: 100%; 
     } 
    </style> 


</head> 
<body> 


     <div class="container"> 
      <div class="table"> 
       <div class="row"> 
        <span class="left">AAAA</span> 
        <span class="mid"> 

         <input type="hidden" id="e5" /> 

        </span> 
        <span class="right">ZZZZ</span> 
       </div> 
      </div> 
     </div> 


     <script> 

      $("#e5").select2({ 
       minimumInputLength: 0, 
       query: function (query) { 
        var data = { results: [] }; 
        data.results.push({ id: 1, text: 'abcdefg' }); 
        data.results.push({ id: 2, text: 'abcdefghijklmn' }); 
        data.results.push({ id: 3, text: 'abcdefghijklmnopqrstuv' }); 
        data.results.push({ id: 4, text: 'abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz' }); 

        query.callback(data); 
       } 
      }); 

     </script> 


</body> 
</html>

JSFIDDLE: http://jsfiddle.net/264FU/

fonte

2013-05-13 user210757

Basta provare aggiungendo

table-layout: fixed;

al vostro table oggetto. A meno che tu non voglia davvero impostare gli span verdi a 100px.

ecco un EDIT jsfiddle example

: Se si desidera che il lato "verde" campate per ridimensionare/regolare al contenuto, si può imbrogliare un po '(il possibile dal momento che non si tratta di un vero e proprio html tabella) e impostare lo su display:table con un layout fisso (e impostare la larghezza di quella verde su qualcosa di più piccolo, poiché serve come larghezza minima). E funzionerà come un fascino =)

jsfiddle for this solution

fonte

2013-05-13 23:56:22

Esattamente quello di cui avevo bisogno! Ho lottato con questo per un po 'e una soluzione così semplice! Grazie! – user210757

Felice di aiutare! = D –

Il mio codice HTML esistente avvolge la tabella div in un P e questo causa problemi - qualsiasi idea - http://jsfiddle.net/L5yKC/ – user210757

Come nascondere l'overflow su select2?

risposta

Problemi correlati