Select2 Выбрать в Bootstrap Modal

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

Я использую jquery 1.11.2, select2-4.0.0-beta.3 и bootstrap-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(); Плагин отлично работает в других местах. Но он втянулся в модальный:

http://imgur.com/rzcTVTD

Обновление: (Нет) Рабочая скрипка здесь http://jsfiddle.net/Strernd/o0d3vtek/

Ответы

Ответ 1

Проблема, с которой вы сталкиваетесь, заключается в том, что, когда Select2 привязан к выбору, генерируемый диапазон выглядит примерно так:

<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, который заставляет текст "разделяться". Вы могли бы подумать: "Почему, черт возьми?!" и ответ, безусловно, таков: вы используете бета-версию.

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

  • Принудительно width: 100% со следующим кодом CSS:

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

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

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

Ответ 2

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

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

Ответ 3

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

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

EDIT

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

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