Hi,
after searching for a solution I found a semi solution that brings another problem, and you can find them in the links below.
dropdown-not-overflowing-in-a-modal, dropdownselect-list-not-overflowing-outside-of-modal
So the issue there is the dropdown doesn't overflow inside a modal. So the solution discussed in those topics is to disable the modal overflow property, like this.
.modal-content { overflow-y: unset !important; }
.modal-wrapper { overflow: scroll; }
The problem with this approach is that, by disabling the overflow, if you have a modal with more content besides the DropdownSelect, it will overflow out of the modal:
Without the fix above:
With Fix:
In other words, adding that CSS line breaks the modal responsiveness.
Any idea how to make this right?
Thanks,
João Franco
Hi João,
To ignore the parent overflow settings, you can use position: absolute on the dropdown. This solution has some issues, though; you'll need to explicitly define the modal height and/or reserve some space for the dropdown to sit 'on top of', and you'll have to explicitly define the dropdown position relative to the modal (using top, left, etc).
Haven't found a more elegant solution yet, but it should work.