bootstrap modal with select2 z-index

bootstrap-modal jquery-select2-4
Mustafa Magdy picture Mustafa Magdy · Jul 24, 2015 · Viewed 13.1k times · Source

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.

enter image description here

here is a snippet of what I'm doing 

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

Any Ideas ?

Answer

Dan picture Dan · Jul 3, 2018

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.

Related questions

Bootstrap modal: is not a function

I have a modal in my page. When I try to call it when the windows load, it prints an error to the console that says : $(...).modal is not a function This is my Modal HTML : <div class="modal …

Read More
In Bootstrap open Enlarge image in modal

How do I open / enlarge an image in a modal using jquery / js and not data attributes? Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, …

Read More
Confirm deletion using Bootstrap 3 modal box

I need to confirm deletion using Bootstrap 3 modal box (YES/NO). How can I create this? HTML code: <form action="blah" method="POST"> <button class='btn' type="submit" name="remove_levels" value="delete"> <span class="…

Read More