p-calendar inside p-table filter z-index

[sgentile]

I believe this is a z-index issue :

When using within a template

<p-calendar *ngSwitchCase="'termStartDate'" [showIcon]="true"></p-calendar>

When clicking on the calendar to open it - it is hidden under the table itself:

[sgentile]

Found a workaround here

#3940

<p-calendar *ngSwitchCase="'termStartDate'" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}" [showIcon]="true"></p-calendar>

[sgentile]

Actually that isn't a work around at all - it's a 'fixed' position so when you scroll it doesn't maintain it's position.

[rexorient]

Easier "fix" but similarly flawed: add appendTo="body" to p-calendar.

[sgentile]

adding appendTo="body" fixed this for me - thank you

[bonavida]

I'm sorry to put a comment on this after it has been already closed, but with the appendTo="body" workaround, when you scroll it still doesn't maintain its position...

Do you know any other solution for this?

[joelrlneto]

For me, I had to set appendTo="body" and baseZIndex = 1050 because I have a navbar with z-index: 1020.