select2でオーバーフローを隠す方法は？

私は優れたselect2 jqueryコントロールを使用しています。
私は、CSSのdivレイアウトを使用して、3セルテーブルの表示レイアウトを模倣しようとしています。
選択が現在のselect2幅より大きい場合、コントロールは通常、楕円でオーバーフローを隠します。私のレイアウトでは、select2コントロールはテキスト全体を表示し、 "テーブル" divの境界から吹き飛ばします。代わりにオーバーフローを隠すことが欲しいです - これを行う方法はありますか？そして、私はディスプレイを完全にはめ込むことに反対していません：テーブルデザイン（実際のテーブル用でない限り）。select2でオーバーフローを隠す方法は？

enter image description here

を、私はそれがこれをしたい：

鉱山は、これを行い

enter image description here

私はそれがより多くの利用可能なスペースを埋めるとしたいん。注 - 問題を再現する500pxのコンテナがありますが、実際にはこれはpercenatgeコンテナになり、問題はウィンドウのサイズ変更で発生します。

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

出典

2013-05-13 user210757

ちょうどあなたtableオブジェクトに

table-layout: fixed;

を追加してみてください。緑のスパンを100ピクセルに設定したくない場合を除きます。あなたが側が「緑」したい場合（私たちは本当のHTMLを扱っていないことができるので、コンテンツに合わせて調整/リサイズするまたがる、あなたが少しをごまかすことができ：ここ

はjsfiddle example

EDITですテーブル）、固定レイアウトの.midをdisplay:tableに設定します（緑色の幅を小さい幅に設定すると、最小幅として機能します）。そして、それは）=魔法のように私がまさに必要

jsfiddle for this solution

出典

2013-05-13 23:56:22

を動作します！私はしばらくこのような単純な解決策のためにこれと苦労した！ありがとうございました！ – user210757

喜んで助けてください！ = D –

私の既存のHTMLはPの中のテーブルdivをラップしています。これは問題を引き起こします - 任意のアイデア - http://jsfiddle.net/L5yKC/ – user210757

select2でオーバーフローを隠す方法は？

答えて

関連する問題