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 ?

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

Solution 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).

Solution 3

I hope its work

Try to remove tabindex="-1" from modal.

Solution 4

Add custom css with modal-open class

.modal-open .select2-container {
  z-index: 9999;
}

View more solutions

Comments

[Kevin Brown-Silva]

You've tagged this with Select2 4.0.0, but your screenshot is definitely from an older version. What version of Select2 are you using?

[Mustafa Magdy]

No, I've referenced version 4.0 already ..., this was working on 3.5.x, but I've updated to ver 4.0 and un-reference the old version

[Cassio Seffrin]

Have you checked this doc: select2.org/troubleshooting/common-problems. Seems like select2 v4 have a know issue with bootstrap modal

[joker]

@CassioSeffrin, thanks a million!

[Guilherme Flores]

I did that and it brings forward, but the list is behind the modal.

[Marcelo Myara]

Hi there @GuilhermeFlores. Do you have any other css affecting Z-Order of the select2 or any of it's inner elements? If so, just disable it all, and be sure that the "dropdownParent" value is pointed do the bootstrap's modal container.

[allexiusw]

It worked for me, I was runing into troubles with this, I know that tab will not close the modal but, is better than can't write anything in the select2 sarch box.