19
Views
1
Comments
[OutSystems UI Web] DropdownSelect not overflowing Modal - OutSystems UI Web v1.8.6
Forge component by OutSystems R&D
61
Published on 28 Dec 2020
Application Type
Traditional Web

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

Rank: #2753

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.