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 ?

Irrepressible

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? – Ambivert

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 – Irrepressible

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

@CassioSeffrin, thanks a million! – Designedly

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.

Sapphira

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

Laplante

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

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. – Laplante

Answer 3

I hope its work

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

Motheaten

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. – Harp

Answer 4

Add custom css with modal-open class

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

Deputy

Answer 5

It looks messy, for me both of these required:

.modal{
    z-index: 100000 !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}

Sleety

Answer 6

For bootstrap v5 and select2 v4 I did this

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

and focus: false

let modal = bootstrap.Modal.getOrCreateInstance(myModalEl, { focus: false});

Buprestid

Answer 7

I had the same problem but I did use this solution

style="z-index: 50 !important;" directly on the modal

<div id="mdl_name_id" class="modal " tabindex="-1"  style="z-index: 50 !important;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">

Belton