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

I 특정 선택 상자를 대상으로 작동하는 것처럼 보이는 새 CSS 클래스를 추가했습니다. +는 jquery next 함수와 동일합니다. 이것은 당신이 올바른 방향으로 향하게해야합니다. 안전을 위해서 select2 css를로드 한 후에 이것이 설정되어 있는지 확인하십시오.

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

그래서 당신이 원하는 경우 검색 상자는

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

는 내가 선택 2로 마지막 선택 상자를 설정하고 노력 ... 다음 시도 (단일 또는 다중) 모든 select2s에 대해 동일한 크기로 이. 내가하고있는 일은 IE에 내장 된 DOM 탐색기를 사용하여 문제를 일으키는 요소와 적용되는 클래스를 찾습니다. 그런 다음 간단히 덮어 쓰거나 추가합니다.