primevue icon indicating copy to clipboard operation
primevue copied to clipboard

OverlayPanel / Menu: Prop `append-to` does not properly respect `fixed` elements

Open baaskoen opened this issue 1 year ago • 0 comments

Describe the bug

When using components that have the append-to prop, it is unclear / bugged on how this should work with elements that have position:fixed.

For example:

<header style="position:fixed;" ref="header">
  <Button label="Profile dropdown" />
  <OverlayPanel :append-to="header">
    My content needs to stay fixed
  </OverlayPanel>
</header> 

Will not work by default, and needs a workaround (thanks to Ziad on discord): https://stackblitz.com/edit/xyjgbo?file=src%2FApp.vue

There seems to be a bug associated with appendTo since the positioning is still affected by the scroll position.

Reproducer

https://stackblitz.com/edit/xyjgbo?file=src%2FApp.vue

PrimeVue version

3.48.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

baaskoen avatar Feb 14 '24 12:02 baaskoen