Primeng: OverlayPanel display position on the page top not related to the div

[govindarajkp]

I am using the OverlayPanelModule in my application, always the panel display the bottom of the page. not on the proper position.

<p-dataTable class="backLogChanges"  scrollable="true"   [value]="changes" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [sortMode]="single" resizableColumns="true" columnResizeMode="expand" tableStyleClass="table-hover" [globalFilter]="gb" (onFilter)="onFilter($event)" *ngIf="!loading"
    [attr.sortField]="defaultSortField()" [sortOrder]="-1" #dt>

        <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="col.sortable" [filterMatchMode]="col.filterMatchMode" [filter]="col.filter" [style]="col.width?{'width': col.width+'px'}:''">
          <ng-template let-column let-change="rowData" pTemplate="body">
<span (mouseenter)="op2.show($event)">{{ change[column.field] | slice:0:64 }}</span>
</ng-template>
        </p-column>
    </p-dataTable>

<p-overlayPanel #op2 [dismissable]="true" [showCloseIcon]="true">
    Testing
</p-overlayPanel> 

[govindarajkp]

after setting appendTo property working fine.

<p-overlayPanel #op2 [dismissable]="true" [showCloseIcon]="true" [appendTo]="'body'">
        Testing
    </p-overlayPanel>

[cagataycivici]

Glad to hear.

[theNotoriousHxc]

I had a similar situation with @govindarajkp. In the documentation it's null. Shouldn't there be a default value for [appendTo]?

[jbermanwebguru]

I fixed this by creating a div element with a certain size, and using that as the target when opening the overlay.

<div
  #overlayTarget
  style="width: 200px; height: 30px; margin-top: -30px;"
></div>

export class MyComponent {
  @ViewChild('overlayTarget')
  overlayTarget: ElementRef;

  @ViewChild('myDialog')
  myDialog: OverlayPanel;

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    this.myDialog.show(event, this.overlayTarget.nativeElement);
  }
}

[neotic82]

after setting appendTo property working fine.

<p-overlayPanel #op2 [dismissable]="true" [showCloseIcon]="true" [appendTo]="'body'">
      Testing
  </p-overlayPanel>

it worked for me but in this other way in Angular

<p-overlayPanel #op2 [dismissable]="true" [showCloseIcon]="true" appendTo="body">
       Testing
</p-overlayPanel>