Select2 Select in Bootstrap Modal

Question

Я уже проверял другие темы, покрывая эту проблему, но ни одно из этих решений не работает для меня.

Я использую JQuery 1.11.2, select2-4.0.0-beta.3 и самозагрузку-3.3.1

Мой модальный выглядит следующим образом:

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

И я хочу позвонить $('#products').select2(); Плагин прекрасно работает в других местах. Но это облажались в модальном:

Update: (Не) Работа скрипку здесь http://jsfiddle.net/Strernd/o0d3vtek/

Answer 1

Проблема у Вас есть то, что, когда Выбор2 является переплетены в избранных, генерируемый диапазон это что-то вроде:

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

Вы заметите жёстко прописанные width: 100px, что заставляет текст быть «разорваны». Вы могли бы подумать: «Почему, черт возьми ?!» и ответ, безусловно, таков: вы используете бета-версию.

Вы можете решить эту проблему:

1. Принуждение width: 100% с помощью следующего кода CSS:

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

   Взгляните на this working jsfiddle (я добавил некоторые col-xs классы наклейке и другой DIV). Помните, что это решение работает до тех пор, пока у вас достаточно ширины для вашего текста. Если ширина меньше, чем текст, который вы будете иметь тот же вопрос, и вам нужно настроить CSS, чтобы добавить overflow: auto; и text-overflow: ellipsis;

2. Используйте последнюю стабильную версию 3.5.2, которая работает правильно, как this jsfiddle shows.

Answer 2

Что я сделал, чтобы добавить этот код непосредственно над страницей

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

Answer 3

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

не работает, когда у вас есть select2 вне модальным.

EDIT

Я нашел, что это было бы лучшим решением при использовании select2 в Bootstrap Модальные и за их пределами.

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

Answer 4

Вы можете использовать этот link, когда вы хотите использовать select2 в модальный:

$('#my-select').select2({ 
    dropdownParent: $('#my-modal') 
});