bootstrap modal with select2 z-index

Question

I'm trying to load content from different html page to a popup then applying select2 on it.

everything is working, but the z-index for the select2 is not correct, event if I modified it to bigger value than bootstrap dialog is.

here is a snippet of what I'm doing

.select2-dropdown {  
  z-index: 10060 !important;/*1051;*/
}

Any Ideas ?

Answer 1

Combining a couple solutions found on the Select2 GitHub issue tracker seems to get Select2 v4 working with Bootstrap modals.

Add this css...

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

Then I was still unable to type in the search box... removing the "tabindex" attribute from the modal div fixed that.

Answer 2

In fact, you shouldn't mess with the Select2 z-index.

You should define the modal in which the select2 is rendered, just like:

$(document).ready(function() { 
    $("#s2id_autogen5").select2({ 
        dropdownParent: $("#myModal") 
    }); 
});

Assuming your modal id is "myModal" (it's not readable on your image).

This will avoid the z-index effect while also avoid other colateral effects of messing with the z-index (like rendering the select2's search field unreachable).