p-overlaypanel not aligned to my button

[bojackhorseman0309]

Hi, i'm currently developing a notification component using a simple button and the p-overlaypanel. I'm currently using PrimeNG 8.0.0.

What my problem is, is that the p-overlaypanel arrow is not aligned to my button, it is completely off.



Here is my component HTML snippet

Code: Select all

<button type="text" pButton label="Notificaciones" (click)="op1.toggle($event)" icon="fas fa-bell" matBadge="{{largo}}"
  matBadgePosition="above after"></button>



  <p-overlayPanel #op1>
    <div *ngIf="largo>0; else elseBlock">
      <tr *ngFor="let notif of notificaciones">
        <td style=" border-bottom: 1px solid #ddd;">{{ notif.descripcion }}</td>
        <span style="cursor: pointer;">
          <i class="fas fa-times" (click)="borraNotificaciones(notif.idNotificaciones)"></i>
        </span>
        <p style="padding-top: 17px; font-family: Open Sans, Helvetica Neue, sans-serif;">{{ notif.fechaNotificacion}}
        </p>
      </tr>
    </div>
    <ng-template #elseBlock>No tiene notificaciones. WooHoo!</ng-template>
  </p-overlayPanel>
  
  

I have searched for this problem, but from the few discussions on this forum and other posts i have not found the solution for my case.

Thank you

[yigitfindikli]

Hi, i'm currently developing a notification component using a simple button and the p-overlaypanel. I'm currently using PrimeNG 8.0.0.

What my problem is, is that the p-overlaypanel arrow is not aligned to my button, it is completely off.



Here is my component HTML snippet

Code: Select all

<button type="text" pButton label="Notificaciones" (click)="op1.toggle($event)" icon="fas fa-bell" matBadge="{{largo}}"
  matBadgePosition="above after"></button>



  <p-overlayPanel #op1>
    <div *ngIf="largo>0; else elseBlock">
      <tr *ngFor="let notif of notificaciones">
        <td style=" border-bottom: 1px solid #ddd;">{{ notif.descripcion }}</td>
        <span style="cursor: pointer;">
          <i class="fas fa-times" (click)="borraNotificaciones(notif.idNotificaciones)"></i>
        </span>
        <p style="padding-top: 17px; font-family: Open Sans, Helvetica Neue, sans-serif;">{{ notif.fechaNotificacion}}
        </p>
      </tr>
    </div>
    <ng-template #elseBlock>No tiene notificaciones. WooHoo!</ng-template>
  </p-overlayPanel>
  
  

I have searched for this problem, but from the few discussions on this forum and other posts i have not found the solution for my case.

Thank you

Hi,
Can you provide a stackblitz sample using with https://stackblitz.com/github/primeface ... e-template .