SAP/ui5-webcomponents-react

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

Closed this issue · 3 comments

JackieWei commented

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

20240711155850851.mp4

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

  • I’m not disclosing any internal or sensitive information.
Lukas742 commented

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.
JackieWei commented

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

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