Dropdown in mobile app cut off at bottom of web block

I have a standard Outsystems dropdown control in a web block. 

When the dropdown is clicked the list is shown but cut off a the bottom of the block.

In my case only 1,5 items are visible in the dropdown list. See attached image.

I found this post (https://www.outsystems.com/forums/discussion/21859/bug-found-dropdown-does-not-work-in-a-tab-widget-in-mobile-app/) byt that is a different problem.

Hello Gert-Jan Vernooij

I tested the behavior on my Android and the drop down list worked as expected.
So, assuming this is not a bug in the widget (and I think not), this behavior of being "cut" is typical of style problems (conflicting CSS that is causing the overflow to be hidden, for example).

You have the problem in the Preview in web or only at the device?

If you can reproduce the error in Preview, you can inspect to find the problem (if it is being caused by CSS, but it seems so).

If you need help, if you can provide the link to the application, (and maybe an OML, but probably the preview link is enough to find the problem), we can help you find the problem.


Eduardo Jauch

Thanks for the reply.

I spent some time to figure out what specific situation gives this behaviour.

A page with a tab-control

In the tab-content a list-group

In the list group a list-item

In the list item a webblock that contains a dopdown 

The dropdown has 6 values (First, Second, third etc.) But only two are visible. If the dropdown is on the vottom of the block, no optins are shown.

If the list is not on as tab-page there is no problem.

If the webblock is not contained in a list-item there is no problem

So it must be the combination of the tab and the list-item that results in this problem.

Hello Gert-Jan Vernooij

I'm almost sure that this is a "CSS" problem that happens in the situation you describe.
I'll try to identify the cause.

Eduardo Jauch

Ok, found the culprit. :)

There is a CSS associated with the list item that has the property "overflow: hidden;"

padding: 15px;
overflow: hidden;
position: relative;

If you change the "overflow" to something else (like "visible") it will not "cover" the list anymore.
But I would say to be careful as this can have other consequences. I didn't look too much into it.

Eduardo Jauch

Obrigado Eduardo,

This solves the problem on the screen I was building, (There is enough space under the list luckily)

In my test-page there is still a problem when the list reaches the bottom of the tab-page. Normally the list is expanded upwards when there is no room under the dropdown, but now it is still expanded downwards. If I set the overflow to "auto" I can scroll down in the webblock and select the items but it is not very pretty.

Hi, I'm having the exact same problems over here... 

This only happens in the Mobile App in OutSystems Now on iOS, not in Preview Mode. (which is weird, I think)

@Gert-Jan Vernooij Can you confirm this?

Will try some CSS changes like you suggested!

Yeah, I noticed this aspect.

The problem is related with the TAB. Probably some CSS that makes the detection of the position of the list in the screen not work properly.

But to solve this would be necessary a deeper look into the TAB CSS and do some tests (for me, at least).
Maybe it is easier to find some workaround? 

TABs in mobile are not really friendly, anyway...

Eduardo Jauch