[FIXED] Primeng: p-calendar partially hidden behind p-dialog

Issue

Working in Angular with primeng, the popup of the p-calendar component not showing in the expected way (clipping with other components), when placed inside a p-dialog, i.e. it is hidden behind other elements by default.

Calendar example

Solution

Just add this pice of code that make your date picker(the calendar component, not the input field) stay in front of other elements:

.ui-datepicker{
  overflow: visible;
  z-index: 999;
}

Answered By – Atto2O

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published