Search code examples
htmltwitter-bootstrapbootstrap-modalz-indexjquery-chosen

Chosen dropdown list Z index issue with Bootstrap Modal

The chosen dropdown list always goes underneath the next available card element on the model.

I have tried

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}
.modal-body {
    overflow-y:visible;
}

Here is the jsfiddle example.

enter image description here

I have tried several fixes and none of them seems working.

Chosen dropdown within Bootstrap modal is hidden behind modal footer

How to Solve Option Select appeared behind modal using bootstrap?

Bootstrap dropdownlist z-index displaying under modal window footer

how to make chosen select go over parent div

Solution

  • There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;

    .accordion > .card{
   overflow: hidden;
}

    The solution is just to write the CSS given below to override this CSS;

    .accordion > .card{
   overflow: inherit;
}