2016-07-11 3 views
0

У меня возникли проблемы с получением select2 для работы с моей темой wrapbootstrap (Inspinia).Select2 не работает с модальным

Параметры отображаются под «моим» модалом, что делает их невыбираемыми (см. Снимок экрана ниже). Я думаю, что Select2 создает кучу оберток, которые мешают. Как это исправить? Когда я проверить элемент, это то, что я вижу:

<div class="form-group"> 
    <label>Variant SKU</label> 
    <select name="variant_sku_id" id="variant_sku_id" class="variant_sku_id form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true"> 
    <option value="1">option1</option> 
    <option value="2">option2</option> 
    </select> 
    <span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;"> 
    <span class="selection"> 
    <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-variant_sku_id-container" aria-owns="select2-variant_sku_id-results" aria-activedescendant="select2-variant_sku_id-result-3g9n-1"> 
    <span class="select2-selection__rendered" id="select2-variant_sku_id-container" title="option1"</span> 
    <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span> 
    </span> 
    </span> 
    <span class="dropdown-wrapper" aria-hidden="true"></span> 
    </span> 
</div> 

Select2 not working with modal

ответ

2

Fixed путем добавления этой опции при инициализации ВЫБ.2:

dropdownParent: $(".modal-body") 
0

вы можете изменить Z-индекс для выбор2. Это должно работать:

.select2 { z-index: 99999999; }

0

Может быть, это будет интересно:

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

.select2-container { 
    z-index: 2050; 
} 

И следующий инициализировать Select2 в сценарии

$(".select2_demo_2").select2({ 
    width: '100%' 
}); 

Найдено в http://webapplayers.com/inspinia_admin-v2.4/modal_select2.html

наилучшими пожеланиями

Смежные вопросы