Reactive - Custom dropdown inside accordion is broken
Question

Hello, 

We're having the issue of the Dropdown with Custom content not working when placed in an Accordion control. Here's another post for the same issue : Custom dropdown problem - I tried the suggested CSS hack, but it doesn't seem to do anything.

I've attached a simple Reactive app demonstrating the issue.

When opened, the "broken" dropdown will not allow a user to select, scroll the items or the page, and the content below is moved. 

Is there a planned, permament fix for this issue ? Not too keen on hacking some CSS to get this working right. We may just use the "plain" dropdown, or dropdown search control instead... 

DropDownCustomTest.oml
Solution

Hi Francois Gaudet,


It seems the issue is with the default CSS from the outsystems UI setting the 'Position:inherit' , by overriding this with "position: relative" it fixed the issue, can you confirm ? :)

I attached the OML in this response.




DropDownCustomTest.oml

Hi Romero, 

Yes, this works for the major issue : the dropbox is now usable, it's content can be scrolled and selected. Thanks! 

There is still the minor issue of the rest of the content in the page being displaced by the dropdown height when opened.

Switching the position: relative to position: absolute fixes the displacement of the content, but any portion of the dropdown going "below" the width of the Accordion is hidden. Note : the DropdownSearch control behaves the same way, ie: if the Accordion isn't big enough to show the entire dropdown "box", it's partially hidden.

I guess there's no perfect solution! 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.