SAP/ui5-webcomponents-react

Toast: Toast position is broken, it's getting scrolled with it's container

Closed this issue · 1 comments

abhijeet181088 commented

Describe the bug

Toast's position should remain fixed even if parent container is getting scrolled.
As per my understanding, toast's position (for eg: "BottomCenter") should be relative to the viewport and should remain fixed once shown.

Isolated Example

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

Reproduction steps

  1. Open the stackblitz example
  2. Click on "Show Toast" button
  3. Toast is shown at the bottom of the parent div after scrolling.
  4. Toast should be visible in current viewport.

Expected Behaviour

Toast should be visible in current viewport at provided "placement".

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

macOS

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 @abhijeet181088

mounting popup components like the Dialog, Popover or Toast inside other components is not recommended. You can find out more about this here (I will extend this entry, so it's clearer that not only Popovers or Dialogs are affected by this).

Please mount the Toast outside of the component: https://stackblitz.com/edit/github-lg4jzd-zzgutc?file=src%2FApp.tsx

Alternatively, you could also use our Modals API: https://stackblitz.com/edit/github-lg4jzd-4tff68?file=src%2FApp.tsx