web-dev-qa-db-ja.com

Select2 Bootstrapモーダルで選択

私はすでにこの問題をカバーする他のスレッドをチェックしましたが、この解決策のどれも私のために機能しません。

私は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/

twitter-bootstrap-3modal-dialogjquery-select2
10
Strernd

あなたが抱えている問題は、Select2がselectにバインドされると、生成されるスパンが次のようなものになることです。

<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. 次のCSSコードでwidth: 100%を強制します。

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

    this working jsfiddle を見てください（ラベルにcol-xsクラスをいくつか追加し、別のdivを追加しました）。このソリューションは、テキストに十分な幅がある限り機能することに注意してください。幅がテキストよりも小さい場合は同じ問題が発生し、CSSを微調整してoverflow: auto;とtext-overflow: Ellipsis;を追加する必要があります

  2. this jsfiddle shows として正しく機能する最新の安定バージョン3.5.2を使用します。

25
Luís Cruz
span.select2-container {
    z-index:10050;
}

モーダル外にselect2がある場合は機能しません。

EDIT

Bootstrap Modalおよびその外部でselect2を使用する場合、これがより良い解決策になると思いました。

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

私がやったことは、ページのすぐ上にこのコードを追加することでした

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

モーダルでselect2を使用したい場合、これを使用できます link ：

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