OverlayPanel - cannot use inside divs with position: relative

[Etchelon]

Hello,
I have this html:

[... other html]
<div style="position: relative">
    [...]
    <p-dataTable>
        <p-column>
            <template>
                <button type="button" (click)="togglePanel($event, panel)"></button>
            </template>
        </p-column>
    </p-dataTable>
    <p-overlayPanel #panel>
        Content
    </p-overlayPanel>
</div>

When clicking the button, the overlay panel appears a bit below the button. This offset is roughly equal to the height of [...other html]. I inspected the div inside the and noticed a position absolute with something like top: 300px. Obviously the 300px start from its closest non static parent, instead of the window.
Therefore, in order to fix it, I think you should move and append the panel to the element, like kendoNotification from the Telerik kendoUi framework does. Or do something else, because as it is the correct behavior of the OverlayPanel depends on the developer to place it in the correct place.

[cagataycivici]

Fixed via #679. Try appendTo="body" so it can be appended where you want it to be flexible. We've solved similar issues with overlays in PrimeFaces using this approach.

[phanisri456]

appendTo="body" is not working. First time it is opening offscreen. Is there any other solution.

[ghost]

@phanisri456 I tried, it works fine. Could you provide a reproducible plunker example?

[saikiranmandhala]

I am also facing the same issue. I have a label inside a row grouped datatable. Clicking on the label showing overlay-panel far way from button.

[cagataycivici]

You need appendTo="body" on overlay panel to solve this. It works for me. Provide a plunkr to request a reopen please.

[saikiranmandhala]

oooffffo!! It is bootstrap which is messing up with the top style property of p-overlaypanel.
I have inspected it and solved. Basically i have had a bootstrap div class="col-md-12" and a bootstrap panel containing the p-datatable and p-overlaypanel. Once i removed them it started working fine.
So there is no issue with overlay panel.
Thanks cagataycivici !

[android-janet]

appendTo="body" works better for me. Only thing is - The content shows up on the left side when I need it on the right side. Anyone know how to do this?

[jonbarthol]

@cagataycivici it would be nice if p-overlayPanel could do relative positioning like p-dropdown. Using appendTo="body" doesn't work well in the case the p-overlayPanel is inside a p-dialog. This causes z-index problems where the p-overlayPanel ends up underneath the p-dialog.

I was able to do my own relative positioning by setting "willShow" to false immediately after calling "show()." I then called domHandler.relativePosition().

[CesarGonzalezM]

It would be great if appendTo="body" was added to the docs of p-overlayPanel...

[carlesfelix]

I have the same issue. If you append to body the overlay it will stay fixed when you scroll.
For instance:

• I have a list in a relative div (overflow: scroll).
• When I click a button in a item and I scroll this list (with appendTo=body) the overlay won't scroll.
  I tried setting a target but the position stills wrong.
  I tried to force to set the position to top: 0 !important and left: 0 !important but it doesn't work.
  Are there an alternative to fix that without appendTo=body?

[JavatarJr]

Triggering the event based on element #id worked for me. By doing the toggle from typescript, I was able to pin point the element I need to attach the overlay panel.

HTML:

<--loop the data-->

<--outside of the table add the overlay menu-->

TS File:
panelData: any;
@ViewChild('menu', {static: false}) op: OverlayPanel;

showOverlayPanel($event: MouseEvent, rowwiseData: any, id:string) {
this.panelData = rowwiseData;
this.op.toggle($event,document.getElementById(id));
}