prime ng p-calendar getting closed inside p-dialogue when scrolled

Question

I am working on angular and Prime ng library. I have one modal which have calendar inside it. The calendar height is not fitting the modal. So when I scroll the dialogue calendar gets closed automatically. But I want user to scroll and select the month and date. But when I use the same calendar outside the modal it works and don't get close even when I scroll.

Below is stack blitz demo https://stackblitz.com/edit/primeng-calendar-demo-swqhuj?file=src%2Fapp%2Fapp.component.html

Below is my code.

<p-dialog header="Header" [(visible)]="displayBasic" [style]="{width: '100vw'}" [baseZIndex]="10000">

<div class="p-fluid p-grid p-formgrid">
    <div class="p-field p-col-12 p-md-4">
        <label for="basic">Basic</label>
        <p-calendar inputId="basic" [(ngModel)]="date1"></p-calendar>
    </div>
</div>
</p-dialog>

Is there a way to avoid this. Any help will be appreciated.

Answer 1

<p-dialog [contentStyle]="{'overflow': 'visible'}">