Skip to content

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

@spdev3000

Description

@spdev3000

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions