61
Views
6
Comments
[OutSystems UI] Dropdown does not open when overlaps tab
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.54.13 (Build 62526)

Hello! 

I am having some trouble regarding a dropdown list that when overlaps the tabs component it gets hidden and I am not being able to show it.

The original list for the dropdown should be this one: 

But when it overlaps the tabs component it gets cut: 

And when inspecting I can see the list is all rendered:

Does anyone know how to solve this?

Thank you in advance.

test.oml
UserImage.jpg
Aman Singh Rajput

Hello @Catarina Ferreira,

Wrap the Dropdown block in a container and give some appropriate height to the container (around 400px should work).

Hope this helped.


Regards,

Aman Singh Rajput.


UserImage.jpg
Catarina Ferreira

Hello! Thank you for your answer but it actually does not help me in my scenario because I don't want to make my content 400px above than expected cause then I have a lot of empty space between my dropdown and the rest of the page: 

2024-03-04 12-06-32
Flávio Monteiro

Hi,
Im having the same problem did anyone came up with a solution? 

2024-05-14 06-52-28
Srigovindh-EONE

hi Flávio Monteiro 

I hope your issue can be rectified with following CSS change , While you inspect  will get the navigation tab  base class name, in that you change the overflow hidden property ,please refer the Demo link, 

https://personal-wcnuuiyu.outsystemscloud.com/OutsystemBasic/Dropdowndoesnotopenwhenoverlapstab?_ts=638518876081768247

The CSS changes should be like this 

For further details refer this OML 

Dropdown(Overlaps).oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP

@Srigovindh - EONE 

this also breaks the tabs themselves

2025-02-21 07-07-34
Rishabh Tailor

Hi,

The tabs are supposed to have all the contents within the its container so, you will have to manually override set the overflow to visible.

I happen to have a workaround for this. What I did here is I have changed the overflow property and of tabs content and then reduced the height of the list to fit it into the tabs container and added scroll to the list container. You may have to change the length of the container accordingly.

Check the OML for reference.
  

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