OverlayPanel attached to fixed position top navigation header (bar), scrolls with body out of view.

[graficon]

We have a typical (top) header navigation bar where we attach an overlay panel to show user options such as logout, etc.
The header has position 'fixed'.
When scrolling the document page the header nav bar stays fixed as expected, but the overlay panel (when it's open) scrolls out of view. The widget (button) on the header bar that launches the overlay panel is not clickable any more (after panel has scrolled out of view).

Is there a way to retain the panel's position on the nav bar so that it does not scroll out of view?

Many thanks!

[cetincakiroglu]

Hi,

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

[tomdevin525]

I have the same problem with the MultiSelect. I'm not sure why it appends the overlay (dropdown box) to the body instead of the select container. Doesn't work well inside of fixed position components and also overlaps other fixed elements on the screen when scrolling. I see you can change the "appendTo" value, but it still adds the absolute positioning relative to the container you put it in. Advise on this? :)

[cetincakiroglu]

Please share a stackblitz example so we can identify the issue clearly?

[tomdevin525]

Here is the demo: https://stackblitz.com/edit/fmejha?file=src%2FApp.vue

Open dropdown and then scroll the window.

[tomdevin525]

I found that you can use appendTo: self. I think I'm good, thanks!

[cetincakiroglu]

It's PrimeVue not PrimeNG. Closing the topic.