[ui5-resposive-popover]: the responsive popover is not centered in rtl direction and existing scroll bar

[iva-sap]

Bug Description

ui5-resposive-popover is not centered in cases there is a scroll bar that changes its position on direction - RTL. The issue is reproducible on Mac if the appearance of the scroll bar is set to be always shown.

Affected Component

ui5-resposive-popover

Expected Behaviour

ui5-resposive-popover should be centered.

Isolated Example

Playground example

Steps to Reproduce

1. Open the isolated example
2. Change the dir to rtl of the body element of the "Project preview" iframe in dev tools
3. Click on btn1

Log Output, Stack Trace or Screenshots

If the overflow is set to hidden in the body element then the responsive popover is positioned properly.

Priority

Low

UI5 Web Components Version

2.2.0

Browser

Chrome

Operating System

Windows 11, macOS sonoma 14.6.1

Additional Context

The issue is relevant for ui5-popover.

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[LidiyaGeorgieva]

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

The issue is reproducible also for Windows.

Best Regards, Lidiya

[PlutaKatarzyna]

Hi UI5 Team, just a quick notice that it's issue related with UDEx components. We are using ui5 components version 1.24.8 so we appreciate if fix could be down-ported. Many Thanks! Kate

[tkeiner]

Hi @LidiyaGeorgieva, I found that are some more issues with the Popover in rtl mode.

1. If the Popover is on the left, the arrow pointing to the origin is not correctly displayed:
2. If the Popover is on the left side and the width of the parent element changes, the position of the Popover is not updated smoothly. The transition stutters heavily. If needed I can provide a screen recording.

Kind regards, Tobias

[TeodorTaushanov]

Hello, the issues are fixed in the main and release-1.24 branches

[ui5-webcomponents-bot]

:tada: This issue has been resolved in version v1.24.14 :tada:

The release is available on v1.24.14

Your semantic-release bot :package::rocket:

[PlutaKatarzyna]

Hi @TeodorTaushanov @LidiyaGeorgieva , we update UI5 package version, and it seems that provided solution breaks position calculation with popover is nested inside element with css transform property. CSS transform property create it's own boundary that is treated kind of as new window. I assume that getBoundingClientRect method do not include parent transformation.

Current:

Without parent transform:

[TeodorTaushanov]

Hello @PlutaKatarzyna, where can I reproduce this issue?

[PlutaKatarzyna]

Hi @TeodorTaushanov , I build temporary UDEx Storybook preview instance https://udextest.z6.web.core.windows.net/1321/index.html?path=/docs/components-actions-dropdown--docs&globals=theme:Horizon+Brand - dropdown example in broken due to Storybook canvas transform. I cannot reproduce this on your playground, because there is still version 1.23.13, but I added the code that should cause the issue: playground The point is to wrap popover with its opener into container that has any css "transform" property (value doesn't matter). Important is that this transformed container must be moved on the page somehow, not to cover the same area as body/window (so for example transformed element coordinates point (0,0) can be in the body/view point (100,100)).

[TeodorTaushanov]

Hi @PlutaKatarzyna, it appears that this issue is only present in version 1.24 and doesn't occur in version 2.x. For version 1.x of ui5-webcomponents, we advise against placing Popover/Dialog components within elements that have a transform value.

https://sap.github.io/ui5-webcomponents/v1/components/Popover/

**Note: ** We recommend placing popup-like components (ui5-dialog and ui5-popover) outside any other components. Preferably, the popup-like components should be placed in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break the position and/or z-index management of the popup-like components.

Note: We don't recommend nesting popup-like components (ui5-dialog, ui5-popover).

[TeodorTaushanov]

Hello,

To summarize:

• The issue with "breaks position calculation when popover is nested inside an element with the CSS transform property" has been fixed.
• The RTL centering issue is fixed in 2.x, but not in 1.24 (the fix was reverted in 1.24 due to the aforementioned issue).
• The RTL arrow display issue is resolved in both 2.x and 1.24.
• We are unable to reproduce the "non-smooth transition" issue.

We'll comment here, when we have progress with the remaining issues.

Best regards, Teodor

[MaksymZahreba]

Hi @TeodorTaushanov ,

Both the centering issue and arrow display issue for RTL display being broken while scrollbar present is still present for v1.X version and was not fixed. After discussion within the team was decided that due to migration to v2.X library and v1.X library not being supported anymore after that, while issues are absent in v2.X, UDEx team will no longer pursue the fixing for mentioned issues, thus ticket may be closed.

Best regards, Maksym

[TeodorTaushanov]

@MaksymZahreba, in that case I'm closing the ticket

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!