[URGENT][SF][ui5-responsive-popover][ui5-table][ui5-table-column] The ui5-responsive-popover can not render correctly with ui5-table-column

[sfsf-xweb-sh]

Dear colleagues, I am from SuccessFactors Web Experience Shanghai team.

Bug Description: The ui5-responsive-popover can not render correctly with ui5-table-column. ui5-responsive-popover cannot completely cover ui5-table-column

Reproduce Step

1. goto https://github.wdf.sap.corp/pages/xweb/assignment/app.html?mock#/assignment-detail/ao/2
2. click applicants tab
3. click the '?' icon in Match column
4. you will see the bug

[yanaminkova]

Hello @SAP/ui5-webcomponents-topic-rd,

I am forwarding this issue to you, because it is related with ui5-responsive-popover. Would you please have a look at it?

Regards, Yana

[georgimkv]

Hi @SAP/ui5-webcomponents-topic-rl This issue is caused by the table cell component, which has z-index: 99 set to it. Because of that, any children will inherit the parent's z-index, regardless of what z-index value is later set to the children - the popover will have higher z-index, but it won't work. This issue is similar to #3426 - check the proposed solution in it.

[MapTo0]

Dear reporter,

Popups like Popover, Dialog and Responsive Popover should not be nested inside other components. Best practice is to render them as top level component. In some frameworks such as React there are concepts to help you build that. You can check React Portals API.

Regards, Martin

[sfsf-xweb-sh]

Hi @MapTo0 This issue should be fixed inside component

[ilhan007]

Hello @sfsf-xweb-sh did you try the proposal from @MapTo0 above and render the popup top-level, this way it's going to be displayed over the page's content as expected.

[sfsf-xweb-sh]

Hi @ilhan007 I have tried render the ui5-responsive-popover at top-level and it works