Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Popup] Viewport Boundary Detection in a Scrollable Page or Container #4340

Open
georgi-sla opened this issue Jun 28, 2024 · 0 comments
Open

Comments

@georgi-sla
Copy link
Contributor

georgi-sla commented Jun 28, 2024

Describe the bug
Currently, when there is a scrollbar on the page and the Popup is rendered in its rightmost section, the component seems to overlap with the scrollbar, and the viewport boundary detection is not correctly applied.

To Reproduce

  1. Create a Popup component.
  2. Set the overflow-y property of the page where the component is rendered so that it is scrollable.
  3. Toggle the Popup.
  4. Check the rightmost section of the component which is rendered beneath the scrollbar.

For further reference, please check out the following StackBlitz demo: https://stackblitz.com/edit/angular-mgcnum-mv5tsd

Second example - https://stackblitz.com/edit/angular-x4bk52?file=src%2Fapp%2Fapp.component.ts
Just click the content inside the scrollable div.

Expected behavior
The Popup should not overlap with the scrollbar of the page where it is rendered.

Screenshots
image

@yanmariomenev yanmariomenev changed the title [Popup] Viewport Boundary Detection in a Scrollable Page [Popup] Viewport Boundary Detection in a Scrollable Page or Container Aug 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant