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
435 stars 97 forks source link

[DynamicPageHeader]: [Flicking when the viewport is scrolled past the header's bottom] #5364

Closed jpgmoreira closed 9 months ago

jpgmoreira commented 9 months ago

Describe the bug

I am using a DynamicPage together with a DynamicPageHeader component. I understand that the DynamicPageHeader component gets collapsed automatically when we scroll the page down so that the top of the viewport touches the header's bottom. The problem is that when it happens, the DynamicPageHeader component gets removed from the page (as I saw on developer tools it gets a position absolute assigned), and it causes the content of the page below the header to move up a little bit, and as a result I get a "flicking" (moving upwards) of the content when the header collapses by scrolling.

In the code I added in the attached sandbox, I've just added some dummy text and a table to show this behavior. If you scroll down the page slowly, when the DynamicPageHeader element gets collapsed the table moves up a little because the header does not occupy any space on the page anymore. I've tested this with the code of the attached sandbox using a resolution of 1480 x 720.

Also notice that in the code (file App.jsx) I have a maxHeight style set to the DynamicPage. I need the content to not flick when the header collapses, even if this maxHeight is set like it is in the example.

Isolated Example

https://codesandbox.io/p/sandbox/dynamicpageheader-flicking-wqnxwf?file=%2Fsrc%2FApp.jsx%3A106%2C25

Reproduction steps

  1. Run the application with the code in the attached sandbox, and a resolution of 1480 x 720;
  2. Scroll the page slowly, until the dynamic header collapses automatically.
  3. Observe that the table moved up a little when the header collapsed, because the header does not occupy any space anymore.

Expected Behaviour

I expect that the content below the header does not move upwards when the header collapses by scrolling.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.19.0

UI5 Web Components Version

1.17.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Relevant log output

No response

Declaration

Lukas742 commented 9 months ago

Hi @jpgmoreira

your example isn't scrollable for me:

image

From the description I would also say that this issue is a duplicate of #5269 which was fixed with v1.23.0, so I'm closing this issue for now.

If these are not the same issues, please add a reproducible example using the latest version of @ui5/webcomponents-react to this issue, I will then reopen it. If these are the same issues, but you have additional context or find that it wasn't fixed properly, then please explain that in the original issue.

Duplicate #5269