Select2 Select in Bootstrap Modal

Question

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:

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

Answer 1

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.

Answer 2

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         
    }