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/

Caprice

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.

Missis

Solutions 2 seems good. It was dumb to use the beta version. But now I have this issue i.imgur.com/wAHIpKD.png – Caprice

Since you're using Bootstrap you'll need two CSS files. The common select2.css and aditionally select2-bootstrap.min.css (see the fiddle resources). For a more "Bootstrap-like" effect, take a look at this page: fk.github.io/select2-bootstrap-css – Schnook

I used solution #1 because I had to use the beta version and it's working. Still, I'm wondering why is that 100px style hardcoded... Thank you! – Scotticism

I'm having this problem with version select2 4.0.0. The problem only occurs when the <select> is within a Foundation reveal modal; if it is anywhere else on the page select2 works as expected. I noticed width: 100px appears in the rendered HTML (when inside of modal), but 100px exists nowhere in the source code. It seems to be generated dynamically, and in conflict with inside a modal (bootstrap and foundation???). Still, solution #1 works in this case as well. =\ – Ceyx

Nice solution from GitHub by kevin-brown. Override in your CSS .select2-dropdown { z-index: 9001; } – Soucy

We are having the same issue with the 3.5.2 version but your solution worked like a charm for us too. – Headcloth

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         
    }

Danyelldanyelle

This should be the accepted answer, it's perfect if you'r using one modal over another modal. Change only select2-container z-index will end up in a mess on a robust structure. – Gamb

Perfect solution...@Danyelldanyelle – Shaddock

Answer 3

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

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

Giacopo

Answer 4

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

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

Woody

Please explain why this works, don't just 'dump code' – Ppi

z-index is enough explanation – Quincey