I have a bootstrap modal which has several dropdowns inside it due to lots of stuff I set overflow: auto
so that it has scroll bar (see scroll bar at right side of the pic).
Now problem is when I click dropdown it opens under the modal (see image) I need dropdown to open over that modal.
P.S: I googled and found lots of solution where we need to set modal CSS property overflow: visible
. But in my case I have to set overflow: auto
coz I have lots of stuff inside modal and scroll bar is necessary otherwise modal height goes over the page.
Need some CSS expert to fix this issue.
Modal CSS
.modal {
max-height: 250px;
overflow: auto;
}
Dropdown CSS
ul.dropdown {
z-index: 999999;
position: relative;
display: inline-block;
vertical-align: middle;
}
ul.dropdown li {
top: 110%;
padding: 0;
max-width: 500px;
max-height: 197px;
position: absolute;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…