Component: Menu

[kevinley]

Describe the bug

When the menu is opened from a button that has position fixed on the page, it is attached correctly.
But when scrolling the page first, then opening the menu, the position of the menu is somewhere on the page -> wrong top value.

I expect the menu to always open in the same position relative to the element triggering it or the target.

Environment

.

Reproducer

No response

Angular version

16

PrimeNG version

16.6

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can identify the issue?

[Kapelianovych]

It may not be related, but consider the following template.

<main>
  <header></header>
  <div>
    <p-button label="Open menu" (click)="menu.toggle($event)" />
    <p-menu #menu [model]="someItems" [popup]="true" />
  </div>
</main>
<style>
  div {
    position: absolute;
    top: 100px;
    left: 0px;
  }
</style>

When menu opens, it receives the top CSS property relative to the viewport, but menu's parent has position: absolute causing menu in fact to be relative to that div and not the viewport. Thus, the actual position of the menu is 100px farther than it should be.