CODEWITHSUNDEEP
twitter-bootstrap-3modal-dialogjquery-select2
Bernd Strehl
Bernd Strehl

Reputation: 2920

Select2 Select in Bootstrap Modal

I've already checked the other threads, covering this problem, but none of this solutions work for me.

I'm using jquery 1.11.2, select2-4.0.0-beta.3 and bootstrap-3.3.1

My modal looks like following:

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

And I want to call $('#products').select2(); The plugin works fine in other places. But it's screwed up in a modal:

http://imgur.com/rzcTVTD

Update: (Not) Working fiddle here http://jsfiddle.net/Strernd/o0d3vtek/

Upvotes: 13

Views: 34582

Answers (4)

Farshid Shekari
Farshid Shekari

Reputation: 2449

You can use this link when you want to use select2 in modal:

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

Upvotes: 7

dannyzar
dannyzar

Reputation: 131

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

does not work when you have select2 outside of the modal.

EDIT

I found this would be a better solution when using select2 in Bootstrap Modal and outside them.

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

Upvotes: 8

Okumu Francis
Okumu Francis

Reputation: 51

What I did was to add this code just above the page

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

Upvotes: 5

Lu&#237;s Cruz
Lu&#237;s Cruz

Reputation: 14970

The issue you're having is that, when Select2 is binded to the select, the generated span is something like: 

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

You'll notice the hardcoded width: 100px that forces the text to be "splitted". You might be thinking "why the hell?!" and the response most certainly is: you're using a beta version.

You can solve this issue by:

  1. Forcing width: 100% with the following CSS code:

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

    Take a look at this working jsfiddle (I added some col-xs classes to your label and another div). Beware that this solution works as long as you have enough width for your text. If the width is smaller than the text you'll have the same issue and you'll need to tweak the CSS to add overflow: auto; and text-overflow: ellipsis;

  2. Use the latest stable version 3.5.2, which works correctly as this jsfiddle shows.

Upvotes: 35

Related Questions