2015-02-28 65 views
10

Tôi đã kiểm tra các chủ đề khác, đề cập đến vấn đề này, nhưng không có giải pháp nào phù hợp với tôi.Select2 Chọn trong Bootstrap Modal

Tôi đang sử dụng jquery 1.11.2, select2-4.0.0-beta.3 và bootstrap-3.3.1

modal của tôi trông giống như sau:

<div class="modal fade" id="addProductModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title">Add Product</h4> 
      </div> 
      <div class="modal-body"> 

      {!! BootForm::openHorizontal(2,10)->action('/recipes/'.$recipe->id.'/product')->post() !!} 

       {!! BootForm::select('Produkte: ','product_list[]' , $products)->id('products') !!} 
       {!! BootForm::submit('Erstellen') !!} 

       {!! BootForm::token() !!} 
      {!! BootForm::close() !!} 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Và tôi muốn gọi $('#products').select2(); Plugin hoạt động tốt ở những nơi khác. Nhưng nó hơi say lên trong một phương thức:

http://imgur.com/rzcTVTD

Cập nhật: (Không) fiddle Làm việc ở đây http://jsfiddle.net/Strernd/o0d3vtek/

Trả lời

21

Vấn đề bạn đang gặp phải là, khi Select2 bị ràng buộc với các lựa chọn, nhịp tạo là một cái gì đó như:

<span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100px;"> 
    <span class="selection"> 
     <span class="select2-selection select2-selection--single" tabindex="0" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="select2-products-results" aria-labelledby="select2-products-container"> 
      <span class="select2-selection__rendered" id="select2-products-container">Mein Produkt</span> 
      <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span> 
     </span> 
    </span> 
    <span class="dropdown-wrapper" aria-hidden="true"></span> 
</span> 

Bạn sẽ nhận thấy văn bản được "chia nhỏ". Bạn có thể nghĩ "tại sao địa ngục?" và phản ứng chắc chắn nhất là: bạn đang sử dụng phiên bản beta.

Bạn có thể giải quyết vấn đề này bằng cách:

  1. Buộc width: 100% với mã CSS sau:

    .select2-container { 
        width: 100% !important; 
        padding: 0; 
    } 
    

    Hãy xem this working jsfiddle (tôi đã thêm một số col-xs lớp học để nhãn của bạn và div khác). Cẩn thận rằng giải pháp này hoạt động miễn là bạn có đủ chiều rộng cho văn bản của bạn. Nếu chiều rộng nhỏ hơn văn bản, bạn sẽ có cùng một vấn đề và bạn sẽ cần phải chỉnh CSS để thêm overflow: auto;text-overflow: ellipsis;

  2. Sử dụng phiên bản ổn định mới nhất 3.5.2, hoạt động một cách chính xác như this jsfiddle shows.

+0

Giải pháp 2 có vẻ tốt. Thật ngu ngốc khi sử dụng phiên bản beta. Nhưng bây giờ tôi có vấn đề này http://i.imgur.com/wAHIpKD.png – Strernd

+0

Vì bạn đang sử dụng Bootstrap, bạn sẽ cần hai tệp CSS. 'Select2.css' và' select2-bootstrap.min phổ biến '.css' (xem tài nguyên fiddle). Để có thêm hiệu ứng "giống như Bootstrap", hãy xem trang này: https://fk.github.io/select2-bootstrap-css/ –

+1

Cảm ơn bạn rất nhiều! Bạn đã tiết kiệm thời gian của tôi :) – Strernd

4

Những gì tôi đã làm là thêm mã này ngay trên trang

span.select2-container { 
    z-index:10050; 
} 
+3

Vui lòng giải thích lý do tại sao tính năng này hoạt động, không chỉ 'kết xuất mã' –

+1

z-index là đủ giải thích – ErTR

4
span.select2-container { 
    z-index:10050; 
} 

không hoạt động khi bạn có select2 bên ngoài của phương thức.

EDIT

Tôi thấy điều này sẽ là một giải pháp tốt hơn khi sử dụng select2 trong Bootstrap Modal và bên ngoài chúng.

.select2-container--open{ 
     z-index:9999999   
    } 
+0

đã cứu mạng tôi. vì vậy +1. cảm ơn – Kimutai

0

Bạn có thể sử dụng này link khi bạn muốn sử dụng select2 trong phương thức:

$('#my-select').select2({ 
    dropdownParent: $('#my-modal') 
}); 
Các vấn đề liên quan