PrimeNg overlay panel is displayed with and without scrolling for the same content

I use the PrimeNG Overlay Panel to display popups in my Angular app.

I noticed that for the same content, it sometimes displays a scrollbar and sometimes does not. As you can see in the screenshots, the first one has a scrollbar and the second one does not.

The popup is opened by clicking an arrow in the table column header on the main page. The only difference I noticed is that the scrollbar appears when the clickable arrow is located closer to the bottom of the page.



The below is my code.

HTML Templates:

<p-overlayPanel #panelRef [style]="panelStyle" (onHide)="onPanelHide(item, panelRef)">
<div *ngIf="item?.entries?.length">
<app-item-details-popup [entries]="item?.entries"></app-item-details-popup>
</div>
</p-overlayPanel>

<p-table [value]="items">
<ng-template pTemplate="header">
<tr>
<th scope="col">Target</th>
<th scope="col">Details</th>
<th scope="col">Resource</th>
</tr>
</ng-template>

<ng-template pTemplate="body" let-row>
<tr>
<td data-qa="target-value">{{ row.target }}</td>
<td data-qa="details-value">{{ row.details }}</td>
<td data-qa="resource-link">
<app-reference-block [references]="row?.resource"></app-reference-block>
</td>
</tr>

<tr *ngIf="row.operator">
<td data-qa="operator" colspan="3" style="text-align: left; font-weight: bold">
{{ row.operator }}
</td>
</tr>
</ng-template>
</p-table>


panelStyle:

minWidth: '300px',
maxWidth: '55vw',
maxHeight: '80vh',
overflow: 'auto',
border: '1px solid #565555ff',
borderRadius: '2px',
padding: '7px'


In helper function:

panel.show(event,arrowRef);


Any thoughts on how this could happen would be really appreciated. Maybe there is a bug in PrimeNg or it is something wrong with my code?

Continue reading...