[OutSystems UI] [Bug] Table with a popover menu (Reactive)

Forge Component
(87)
Published on 7 Jul by OutSystems R&D
87 votes
Published on 7 Jul by OutSystems R&D
Processing Upload...

While developing a simple page using the OutSystems UI, I found a bug only in tablet mode when using a Table with the Popover Menu.

Desktop mode (all good):


Tablet mode (not good):

Can't figure out why the popover menu stays inside the table.

I'm attaching the OML so you can replicate on your side.

Version of the platform: 11.8.0

Version of Service Studio: 11.7.14

Demo URL: https://promonteiro.outsystemscloud.com/Sandbox/?_ts=637300021465389958

Ricardo Monteiro wrote:

While developing a simple page using the OutSystems UI, I found a bug only in tablet mode when using a Table with the Popover Menu.

Desktop mode (all good):


Tablet mode (not good):

Can't figure out why the popover menu stays inside the table.

I'm attaching the OML so you can replicate on your side.

Version of the platform: 11.8.0

Version of Service Studio: 11.7.14


 Hi Ricardo,

Can you please try to increase the z-index property in css for popover for tablet.Please see below

e.g

.Tablet .popover {z-index:999}

Hope this help

Thanks

AD

AD wrote:

Ricardo Monteiro wrote:

While developing a simple page using the OutSystems UI, I found a bug only in tablet mode when using a Table with the Popover Menu.

Desktop mode (all good):


Tablet mode (not good):

Can't figure out why the popover menu stays inside the table.

I'm attaching the OML so you can replicate on your side.

Version of the platform: 11.8.0

Version of Service Studio: 11.7.14


 Hi Ricardo,

Can you please try to increase the z-index property in css for popover for tablet.Please see below

e.g

.Tablet .popover {z-index:999}

Hope this help

Thanks

AD

 

 That didn't work.

Hi Ricardo,

I just investigated the problem statement and I found that the popover menu UI glitches in Tablet mode is happening because of the below mentioned CSS definition

.phone .table, .tablet .table {
    overflow: hidden;
}


Solution

Override the predefined CSS definition with the below mentioned CSS definition

.phone .table, .tablet .table {
    overflow: visible;
}


Hope this helps you!


Regards,

Benjith Sam

Benjith Sam wrote:

Hi Ricardo,

I just investigated the problem statement and I found that the popover menu UI glitches in Tablet mode is happening because of the below mentioned CSS definition

.phone .table, .tablet .table {
    overflow: hidden;
}


Solution

Override the predefined CSS definition with the below mentioned CSS definition

.phone .table, .tablet .table {
    overflow: visible;
}


Hope this helps you!


Regards,

Benjith Sam

 

Hi, that camouflages this problem, but the bug is in the popover menu component, because in the phone view the menu goes up like this:

But in tablet mode goes down. So the problem must be in the positioning of the popover menu component, don't you think? :/

Ricardo,


the answer of Benjit is the solution to your problem,  Not just 'camouflaging' it.

You are confusing 2 different effects: the one Benjit is pointing to, causes the overflow beyond the table borders to be hidden.  The thing you are confusing this with, is that when the popover gets opened close enough to the bottom of the viewport, it will be painted higher up instead of from the point you click downwards.

Dorine