PrimeNG Calendar open Z index error

Question

I am using primeNG calendar and whenever the calendar opens under the input box it is behind all the other html elements. But when it opens above the input box everything is ok.

Can you reproduce it in a StackBlitz please ? – Antikhippe May 21 '18 at 16:22 — Antikhippe, May 21 '18 at 16:22

score 18 · Accepted Answer · answered May 22 '18 at 08:32

I fixed it by using appendTo="body" in the p-calendar html element.

Here is how the html element looks like now:

 <p-calendar appendTo="body" [locale]="dk" placeholder="Inklusion dato" [(ngModel)]="patient.inclusionDate" showButtonBar="true"
      readonlyInput="true" [showIcon]="true"></p-calendar>

score 0 · Answer 2 · answered Dec 05 '18 at 08:57

In my case works well. Just add inline CSS of

<p-calendar [(ngModel)]="dateTo" [disabledDays]="[0,6]" (onSelect)="doOnSelect($event)" [showIcon]="true" [style]="{'overflow': 'visible', 'z-index': '9999','opacity':'1'}"></p-calendar>

Inline only work instead of working in style.css.

PrimeNG Calendar open Z index error

2 Answers2