select2 dropwdownを一定の幅に維持する方法

Question

私はフォームのドロップダウンにselect2を使用していますが、私はテーブルレイアウトを使用していますが（これは問題の一部です）、すべてのフォームの幅グループ要素は同じです。

問題は、select2ドロップダウンにテキストを入力すると、幅が変わることです（奇妙な方法で）。ブラウザがselect2ドロップダウンを固定したままにする最初の幅を強制する方法はありますか？

<table> 
    <tr> 
     <td> 
      <div class="row"> 
       <div class="form-group"> 
        <label>Title</label> 
        <input name="title" class="form-control"/> 
       </div> 
      </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <div class="row"> 
       <div class="form-group"> 
        <label>a label</label> 
        <input class="form-control"/> 
       </div> 
      </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <div class="row"> 
       <div class="form-group"> 
        <label>a label</label> 

        <select id="tag_list" class='form-control' multiple="multiple"> 
         <option value='1'>abba</option> 
         <option value='2'>zabba</option> 
         <option value='3'>doo</option> 
        </select> 
       </div> 
      </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <div class="row"> 
       <div class="form-group"> 
        <label for="category_type">Category Type:</label> 

        <select name="category_type" id="category_type_list" class="form-control"> 
         <option value="" disabled selected>If there is a matching type for the category, please select it</option> 
          <option value="1">A</option> 
          <option value="2">B</option> 
        </select> 
       </div> 
      </div> 
     </td> 
    </tr> 

    <tr> 
     <td> 
      <div class="row action"> 
       <div class="form-group"> 
        <div class="inline"> 
         <button class="btn btn-primary form-control" type="submit">submit</button> 
        </div> 
        <div class="inline"> 
         <button class="btn btn-primary cancel">Cancel</button> 
        </div> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

と私のCSS：

.form-group{ 

    display: block; 
} 

table { 
    margin-left: 5%; 
    table-layout: fixed; 
} 

input { 
    height: 30px; 
    border: 1px solid #e3e3e3; 
    padding: 3px 10px; 
    width: 100%; 
} 

.inline{ 
    float:left; 
    margin-right: 5px; 
} 

span.select2-container{ 
    width: 100% !important; 
    tex-overflow: ellipsis; 
} 

Hereはフィドル例です

は、ここに私のhtmlです。あなたはselect2ドロップダウンに十分長い時間を入力し、幅が変わるのを見てEnterを押すことで試してみることができます。それをどうやって止めることができますか？

Answer 1

私は、特定の選択ボックスを対象に動作するように思われる新しいCSSクラスを追加しました。 +は、jquery next関数と同等です。これにより、あなたは正しい方向に向かうはずです。安全のために、select2 cssをロードした後にこれが設定されていることを確認してください。

#tag_list + .select2-container .select2-selection--multiple { 
    max-width: 400px; 
    } 

検索ボックスは、（単一または複数）のすべてselect2sで同じ大きさになりたいのであれば、次にしてみてください...

.select2-container .select2-dropdown, 
    .select2-container .select2-selection--multiple { 
    max-width: 300px; 
    } 

私はSELECT2に最後の選択ボックスをオンにしてみましたこの。 私がやっていることは、IEに組み込まれているDOMエクスプローラを使用して、私に問題を与えている要素と、どのようなクラスが適用されているのかを見つけ出すことです。その後、単純に上書きまたは追加します。