Primeng: p-overlayPanel in a position:sticky div in a scrollable container has bad position

Created on 6 Feb 2018 · 11Comments · Source: primefaces/primeng

Hi,
I just tried to add a p-overlayPanel in a div with a sticky behavior. This div is inside a scrollable container so appendTo="body" cannot be use (or the overlay won't follow the scrolled content).

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
http://plnkr.co/edit/20NH9GgGoeLQQzsTYmhn?p=preview

Current behavior
The overlayPanel is wrongly positioned.
If I add appendTo="stickyRef" nothing changes.
If I add appendTo="body" it is well positionned BUT it does not follow the scroll.

Expected behavior
It should be positioned right under the button and follow the scroll.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/20NH9GgGoeLQQzsTYmhn?p=preview
Click on Basic overlay, the overlayPanel appears far from the button.
add appendTo="body" to the overlayPanel.
Click on Basic overlay, the overlayPanel appears right under the button.
Scroll the div, the overlayPanel doesn't stick to the button.

Please tell us about your environment:
Windows 7, Google Chrome

Angular version: 5.1.1
PrimeNG version: 5.0.2
Browser: [Chrome 63]
Language: [TypeScript 2.6.1]

Source

Ldoppea

Most helpful comment

@cagataycivici
It does not solve the issue:
I follow the examples from tooltips, weird behavior is still there.

<div #overlayAnchor  style="display:inline-block;position:relative">
    <button pButton
            (click)="overlayPanel.show($event)"
            [label]="abc"
            ></button>
    <p-overlayPanel #overlayPanel [appendTo]="overlayAnchor">
         someContent
    </p-overlayPanel>
</div>

The position of the overlay panel is incorrectly calculated !

Kiiiwiii on 11 Jun 2018

👍4 😕1

All 11 comments

You need to create a wrapper div that contains the button and the overlay panel and append the overlap to this div. Tooltip documentation has an example.

cagataycivici on 17 Apr 2018

@cagataycivici
It does not solve the issue:
I follow the examples from tooltips, weird behavior is still there.

<div #overlayAnchor  style="display:inline-block;position:relative">
    <button pButton
            (click)="overlayPanel.show($event)"
            [label]="abc"
            ></button>
    <p-overlayPanel #overlayPanel [appendTo]="overlayAnchor">
         someContent
    </p-overlayPanel>
</div>

The position of the overlay panel is incorrectly calculated !

Kiiiwiii on 11 Jun 2018

👍4 😕1

I am seeing the same behavior as @Kiiiwiii