p-overlaypanel not aligned to my button

UI Components for Angular
Post Reply
bojackhorseman0309
Posts: 1
Joined: 02 Aug 2018, 21:32

29 Nov 2019, 23:05

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.

Image

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
Posts: 357
Joined: 08 Aug 2018, 14:09

02 Dec 2019, 15:47

bojackhorseman0309 wrote:
29 Nov 2019, 23:05
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.

Image

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 .

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests