I am having an issue with a p-dialog that contains a p-calendar. The problem is that when I try to open the calendar, it pops up upwards instead of downwards.
<p-dialog responsive="true" modal="true" (onHide)="closeDialog()" #genericDialog
[(visible)]="displayModal"
class="generic-dialog">
<div *ngSwitchCase="'DATE_CUSTOM'" class="form-group form-control-head"
[class.has-success]="formGroup.controls ? formGroup.controls[control.name].valid : false">
<p-calendar [monthNavigator]="true" [yearNavigator]="true" [yearNavigator]="true"
[showTime]="false"
[minDate]="dateMin" [maxDate]="dateMax" yearRange="2000:2030" dateFormat="dd/mm/yy"
[showIcon]="true"
[style]="{'width': '95%'}" [inputStyle]="{'height': 'calc(1.5em + 0.75rem + 4px)',
'width': '100%'}"
[formControlName]="control.name" [showButtonBar]="true" [locale]="calendarLang">
</p-calendar>
</div>
<br>
<p-footer>
<div class="col-12 text-center mb-4">
<button [disabled]="formGroup.invalid" (click)="submit()"
class="btn btn-primary px-4">Save
</button>
<button type="button" class="btn btn-info px-4" (click)="closeDialog()"
style="color: white">Cancel
</button>
</div>
</p-footer>
</p-dialog>