[DynamicPage]: Footer Bar's position is not correct

[Xidai]

Describe the bug

I have searched the issues before and found some similar issues, and I tried the suggested approach that set the DynamicPage's height in "vh" unit, but the bug still occurs.

The footer bar in a dynamic page is not "sticky" when scroll up and down, this only happens in a really strict scenario when the content is just a little higher than the container, and it may not always happen in Chrome as you can see in my video (But later I found that it seems Firefox can always reproduce the bug).

Isolated Example

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

Reproduction steps

1. visit the example: https://stackblitz.com/edit/github-navcvj?file=src%2FApp.tsx
2. adjust the browser's height to make the viewport's height between 900px ~ 910px, the example in the video is around 905px. This will make the content's height just a little bit higher than the container.
3. Click the "Create" button.
4. Click "Show More" checkbox
5. Scroll down and the footer bar is not sticky at the bottom. Since the bug can not always be reproduced, you can try to click "Cancel" button to go back and try another time.

Another hint is that the bug always happens belong with a wrong content/scroll container height. As shown in the video(or the screenshots below), the scroll bar is shorter in the normal case than in the bug case. So if the bug occurs, even before you click the "Show More" button, you can find the footer bar is not sticky when you scroll down a little bit.

Expected Behaviour

The scrollbar keeps sticky at the bottom when content's height changes

Screenshots or Videos

This bug can not be consistently reproduced on Chrome(but later I found it seems that Firefox can always reproduce it if the viewport's height is in the specific range), so I have tried 5 times in the video, the first 2 times did not trigger the bug(from the scroll bar status I can tell there's no bugs) so I just directly click cancel button to go back and retry. The 3rd and 4th time triggered the bug, and the last time went normal again.

https://github.com/user-attachments/assets/b22cf760-bc83-4fe5-b9cc-f3bcb627f6a8

Adjust viewport's height:

Normal Case: before click "Show More", the scroll bar is shorter than the bug case, and scroll down a little bit, we can find the footer bar is sticky as expected

Bug Case: before click "Show More", the scroll bar is longer, and if scroll down a little bit, we can find the footer bar is not sticky as expected.

Bug Case: after click "Show More" and scroll down, we can see much more clear that the footer is not sticky.

UI5 Web Components for React Version

~1.29.0

UI5 Web Components Version

~1.24.0

Browser

Chrome, Firefox

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[Xidai]

Hi is there anybody can help to confirm whether this is a bug or not and can it be fixed? Thanks!

[Lukas742]

Hi @Xidai

we're in the final stages of preparing our v2.0 release. As part of this release, the DynamicPage React component will be replaced by the new DynamicPage web component. You can preview it in our v2 documentation or by using our latest pre-release version (v2.0.0-rc.3).

Could you please check if this issue persists with the new DynamicPage, or do you need a fix for v1.29.x specifically?

[Xidai]

Hi @Xidai

we're in the final stages of preparing our v2.0 release. As part of this release, the DynamicPage React component will be replaced by the new DynamicPage web component. You can preview it in our v2 documentation or by using our latest pre-release version (v2.0.0-rc.3).

Could you please check if this issue persists with the new DynamicPage, or do you need a fix for v1.29.x specifically?

Hi @Lukas742 , thanks for responding! I have tried the latest v2 and found that the footer bar can not show(my example: https://stackblitz.com/edit/github-navcvj-qp9jzz?file=src%2FApp.tsx,package.json) and it even occurs in the v2 documentation(there is footerArea in the code, but the footer not showed on the page).

Could you help to take a look at that? Thank you!

[Lukas742]

Hi @Xidai

with the new DynamicPage web component, the footerArea is only displayed if showFooter is true. Sorry for the confusion, we forgot to mention this in our migration guide.

Example with showFooter: true: https://stackblitz.com/edit/github-navcvj-xd8pt1?file=src%2FApp.tsx,package.json