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

[Bug]: VirtualTrigger: Overlay get cut off screen with placement "right-start" #2198

Closed
1 task done
spdev3000 opened this issue Mar 31, 2022 · 0 comments · Fixed by #2300
Closed
1 task done

[Bug]: VirtualTrigger: Overlay get cut off screen with placement "right-start" #2198

spdev3000 opened this issue Mar 31, 2022 · 0 comments · Fixed by #2300
Labels

Comments

@spdev3000
Copy link
Collaborator

spdev3000 commented Mar 31, 2022

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

Overlay, VirtualTrigger

Expected behavior

Overlay should always be positioned and rendered at the screen that all content is visible.

Actual behavior

When using a virtual trigger to open a context menu with placement="right-start" - it happens that the overlay content won't be correct positioned and always visible for small window sizes - and content will get cut off the screen.
This is mostly the case when the opened popover content width is >= half of the UI viewport. For example: If the popover width is 300px, this happens when viewport (body) is shrank to 600px and less.

Screenshots

overlay-wrong-position

What browsers are you seeing the problem in?

Chrome Version 99.0.4844.84

How can we reproduce this issue?

  1. Go to https://webcomponents.dev/edit/ohZswGWTi4aHOb1GUd4X
  2. Click on "ContextMenu Trigger"
  3. Shrink page width (to about 600px or less)
  4. Click again on trigger button (around phrase "Context" of ContextMenu Trigger)
  5. Notify context menu content cut off page

You may try to set placement to "left-start" and there won't be a problem.

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

@spdev3000 spdev3000 added bug Something isn't working Component: Overlay triage An issue needing triage labels Mar 31, 2022
@Westbrook Westbrook added Discovery and removed triage An issue needing triage labels Apr 25, 2022
@Westbrook Westbrook mentioned this issue May 18, 2022
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants