Select2 Select in Bootstrap Modal

jquery-select2, modal-dialog, twitter-bootstrap-3

Solution

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:

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

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

Problem

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/

Original source