Jak ukryć przepełnienie w select2?

Używam doskonałej kontroli jquery select2.
Próbuję naśladować układ ekranu z trzema komórkami, używając układu div CSS.
Gdy wybrana wartość jest większa niż bieżąca szerokość2, kontrolka zwykle ukrywa przepełnienie elipsami. W moim układzie kontrolka select2 pokazuje cały tekst i wydobywa się poza granice div. Chciałbym zamiast tego ukryć przepełnienie - czy jest jakikolwiek sposób to zrobić? I nie jestem przeciwny całkowitemu zrzucaniu ekranu: projekt tabeli (chyba, że dotyczy rzeczywistego stołu).Jak ukryć przepełnienie w select2?

Mine to robi:

enter image description here

I chcę to zrobić:

enter image description here

chcę go wypełnić dostępną przestrzeń, a nie więcej. Uwaga: Mam pojemnik o pojemności 500 pikseli, który służy do replikowania problemu, ale w praktyce będzie to pojemnik percenatge, a problem będzie występować podczas zmiany rozmiaru okna.

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

Źródło

2013-05-13 user210757

prostu spróbuj dodać

table-layout: fixed;

do obiektu table. Chyba, że naprawdę nie chcesz ustawić zielonych rozpiętości na 100px.

o to jsfiddle example

EDIT: Jeśli chcesz bok „zielone” przęsła do zmiany rozmiaru/dostosować się do zawartości, można oszukać trochę (tylko możemy, ponieważ nie mamy do czynienia z prawdziwym html tabela) i ustawić .mid na display:table ze stałym układem (i ustawieniem zielonych szerokości na coś mniejszego - jako minimalną szerokość). I to będzie działać jak czar =)

jsfiddle for this solution

Źródło

2013-05-13 23:56:22

Dokładnie to, co potrzebne! Walczyłem z tym przez jakiś czas i takie proste rozwiązanie! Dziękuję Ci! – user210757

Cieszę się, że mogę Ci pomóc! = D –

Mój istniejący HTML opakowuje div tabeli w P i to powoduje problemy - wszelkie pomysły - http://jsfiddle.net/L5yKC/ – user210757

Jak ukryć przepełnienie w select2?

Odpowiedz

Powiązane problemy