I am facing an issue with my bootstrap modal that contains multiple dropdowns. To accommodate the content, I have set overflow: auto to enable a scroll bar on the right side of the modal.
The problem arises when I click on a dropdown - it opens under the modal instead of over it (as seen in the image). I have searched online for solutions and most suggest changing the modal CSS property to overflow: visible. However, due to the amount of content within the modal, I need to maintain overflow: auto to ensure the modal stays within the page height boundaries.
I am seeking the expertise of a CSS specialist to help resolve 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;
}