search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
433 stars 96 forks source link

[Dynamic Page]: [Dynamic Page Footer] It's twinkling in certain width and screen resolution #6063

Closed JackieWei closed 1 month ago

JackieWei commented 1 month ago

Describe the bug

Dynamic Page Footer will twinkling in certain width and screen resolution. The root cause looks like caused by code in r@ui5/webcomponents-react/dist/components/DynamicPage/index.js, line 90 - 106, in the useEffect, we use IntersectionObserver, while it repeatly call the debouncedObserverFn

Isolated Example

https://stackblitz.com/edit/github-nfl6n7?file=src%2FApp.tsx

Reproduction steps

  1. Use the isolated example 2.Scroll the example width 3.In certain width, the Dynamic Page Footer, It's twinkling, and the scroll bar twinkling

...

Expected Behaviour

No repeatly switch Dynamic Page Footer position from sticky to absolute

https://github.com/SAP/ui5-webcomponents-react/assets/437693/00dbf8ce-4363-4bbc-94c2-cb24a1f23bc5

Screenshots or Videos

No response

UI5 Web Components for React Version

1.28.1

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 1 month ago

Hi @JackieWei

you didn't set a fixed height to the DynamicPage, that's why the footer is jumping:

Note: To preserve the intended design, please use only non-content based height values (px, rem, vh, etc.) as height of the DynamicPage.

Here you can find an example using a non content-based height: https://stackblitz.com/edit/github-nfl6n7-uoxcje?file=src%2FApp.tsx

Also I noticed a few more things that aren't recommended:

JackieWei commented 1 month ago

Hi @JackieWei

you didn't set a fixed height to the DynamicPage, that's why the footer is jumping:

Note: To preserve the intended design, please use only non-content based height values (px, rem, vh, etc.) as height of the DynamicPage.

Here you can find an example using a non content-based height: https://stackblitz.com/edit/github-nfl6n7-uoxcje?file=src%2FApp.tsx

Also I noticed a few more things that aren't recommended:

* The `DynamicPageTitle` component isn't meant to be used as standalone

* The `DynamicPage` is not meant to be used without header area.

Hi @Lukas742 I have set a height = 100% actually. So it must be a numberic hight like 80vh, or 800px, but can't be percentage, like 100%?

Lukas742 commented 1 month ago

Hi @JackieWei

the DynamicPageSideContent sets some CSS properties to the content area which is affecting the children. Two of these are display: inline and height: auto; both of these properties/values have an effect on percentile height values. In this case the height value basically does nothing, as the display type of the parent is set to inline.

image