primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Menu: popup overflows viewport when placed at right or bottom edge

Open thomeijer opened this issue 3 weeks ago • 1 comments

Describe the bug

When a p-menu component with thepopup attribute set to true is positioned at the right or bottom edge of the viewport, the popup menu expands beyond the visible area instead of staying within the viewport.

Pull Request Link

No response

Reason for not contributing a PR

  • [x] Lack of time
  • [x] Unsure how to implement the fix/feature
  • [ ] Difficulty understanding the codebase
  • [ ] Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/stackblitz-starters-gxadrxk2

Environment

Windows

Angular version

21.0.3

PrimeNG version

v21

Node version

24.11.1

Browser(s)

No response

Steps to reproduce the behavior

  1. Add a p-button and p-menu element with popup="true" inside a div.
  2. Attach the menu toggle method to the click handler of the button.
  3. Align the div on the right or bottom side of the screen (e.g. position="absolute"; right: 0")
  4. Click on the button
  5. The menu expands to the bottom right, showing partially outside of the viewport (regardless of appendTo).

Expected behavior

When a menu is positioned on the edge of the viewport, the menu should expand inwards. This used to work in at least v19 and occurred after upgrading Angular and PrimeNG to v21.

thomeijer avatar Dec 10 '25 10:12 thomeijer

I have the same issue. Couple minutes ago I have migrated from "primeng": "20.1.2" (it worked fine) to "primeng": "21.0.1".

Wycza avatar Dec 10 '25 10:12 Wycza

I have same issue, tieredmenu seems to work properly

cyb456 avatar Dec 10 '25 17:12 cyb456