Add baseZIndex and autoZIndex property to Calendar and Dialog

[Abhinav3414]

I'm submitting a ...

[x] bug report => Search github for a similar issue or PR before submitting

Current behavior

I am using modal dialogue and p-calendar inside it, but due to incremental z-index feature of primeNG, calendar goes in background as I click on modal's input field of p-calendar.
Is there any fix provided by PrimeNG on this, other than setting z-index manually (at a higher value) to DOM handle.?

Expected behavior

My requirement is that when the calendar component is still active, and I click inside input field of calendar, Calendar should not go back of modal. It should remain at higher z-index than p-dialog.

Environments:
Windows 10, Eclipse Neon.3 Release (4.6.3)

latest 4 x of angular and prime

[SimonGeering]

I am also able to replicate this issue.

[mx0c]

How do i fix this problem? If i set the Z-Index manually nothing happens...

[Abhinav3414]

Not a permanent or not a standard solution, but I am using important tag for now, as a work around.
.ui-datepicker {
z-index: 100000 !important;
}

[mx0c]

Thanks for your reply! Fixed it now like this: <p-calendar placeholder="endDate" [showIcon]="true" [style]="{'position': 'fixed', 'overflow': 'visible', 'z-index': '999'}" [(ngModel)]="endDate"></p-calendar>

[cagataycivici]

To disable automatic layering, set [autoZIndex]="false", if you want to keep it but want to use a different higher value then 1000 use [baseZIndex]="100000". If autoZIndex is true then when calendar is displayed zIndex would be 100001. Applies to 4.2.3. Dialog also has this, so you can manage it manually properly without your values being overwritten now.

[sgentile]

This should not have been marked as fixed - it isn't fixed:

div *ngSwitchCase="StartDate'">
              <p-calendar [autoZIndex]="false" [baseZIndex]="9999"  [showIcon]="true"></p-calendar>
            </div>

It is hidden by the p-table - no matter what I set the baseZIndex it is still 'hidden' by the table header

[leonetosoft]

@sgentile mesma coisa aqui.

[fffaria]

I still have the bug like the others, no matter what solutions I use that were suggested here.

[tiger5226]

Yeah, I have the problem too...

It just really sucks when you can use the library so easily and then you run into something like this without a way to fix it.

UPDATE:

I found a few things to use.

<input pInputText id="start" type="datetime-local"
               [ngModel]="file.Start | date:'yyyy-MM-ddTHH:mm:ss'"
               (ngModelChange)="file.Start = getDate($event)" />

the getDate is just a ts method created to return Date. It produces the following:

Then I also discovered that if you use the appendTo="body" you get this:

Hopefully this helps others that arrive here.

[emregozel]

I have a quick fix. If you are using dialog component fix this CSS with calendar crop problem.

::ng-deep .ui-dialog-resizable .ui-dialog-content {
    overflow: unset;
}

[Hypenate]

I added appendTo="body" to get it to work.