Wie Überlauf auf select2 ausblenden?

Ich benutze die ausgezeichnete select2 jquery Kontrolle.
Ich versuche, ein 3-Zellen-Tabellen-Display-Layout mit CSS-Div-Layout nachzuahmen.
Wenn der ausgewählte Wert größer als die aktuelle select2-Breite ist, blendet die Steuerung normalerweise den Überlauf mit einer Ellipse aus. Mit meinem Layout zeigt das Steuerelement select2 den gesamten Text an und überschreitet die Grenzen des "table" div. Ich möchte, dass es stattdessen den Überlauf versteckt - gibt es irgendeinen Weg, dies zu tun? Und ich bin nicht dagegen, das Display vollständig zu überdecken: Tischdesign (es sei denn, es handelt sich um eine reale Tabelle).Wie Überlauf auf select2 ausblenden?

-Mine tut dies:

enter image description here

Und ich will es, dies zu tun:

enter image description here

ich es den verfügbaren Raum füllen wollen und nicht mehr. Hinweis - Ich habe einen 500-px-Container, um das Problem zu replizieren, aber in der Praxis wird dies ein percenatge-Container sein und das Problem tritt bei der Fenstergrößenanpassung auf.

<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/

Quelle

2013-05-13 user210757

nur versuchen,

table-layout: fixed;

zu Ihrem table Objekt hinzufügen. Es sei denn, Sie möchten die grünen Spannen nicht wirklich auf 100px setzen.

hier ist eine jsfiddle example

EDIT: Wenn Sie die Seite „grüne“ Spannweiten wollen den Inhalt, um die Größe/anpassen, Sie ein wenig betrug können (wir können, da wir nicht mit einem echten HTML zu tun haben, Tabelle), und setzen Sie die .mid auf display:table mit einem festen Layout (und setzen Sie die grüne Breite auf etwas kleiner - wie es als minimale Breite dient). Und es wird wie ein Zauber funktioniert =)

jsfiddle for this solution

Quelle

2013-05-13 23:56:22

Genau das, was ich brauche! Ich habe damit für eine Weile und so eine einfache Lösung gekämpft! Vielen Dank! – user210757

Gut zu helfen! = D –

Mein vorhandenes HTML umschließt die Tabelle div in einem P und das verursacht Probleme - irgendwelche Ideen - http://jsfiddle.net/L5yKC/ – user210757

Antwort

Verwandte Themen