Angular v10: how do i handle this overlay issue of p-calendar

Question

Overlay going beyond viewport

how do i prevent overlay from exceeding the view port of the browser

overlay should be displayed entirely on screen from top to bottom

would appreciate your help and support,

thanks in advance

<form [formGroup]="subFormGroup">
  <p-dialog
    header="{{ generalTexts.iaName.label }}"
    [(visible)]="visibleDialog"
    [modal]="true"
    [style]="{ width: '80vw', overflow: 'auto' }"
    [draggable]="false"
    [resizable]="false"
    (onHide)="closeSubModal()"
  >
    <div class="p-fluid p-formgrid p-grid">
      <ng-container *ngFor="let controls of subFields">
        <ng-container [ngSwitch]="controls.type" *ngIf="!controls.hidden">
          <div class="p-field p-my-1" [ngClass]="controls.ui">
            <label *ngIf="!controls.noLabel"
              >{{ controls.label
              }}<span *ngIf="isRequired(controls)" class="error">*</span></label
            >

            <!-- start of dateTime field-->
            <ng-container *ngSwitchCase="'date'">
              <p-calendar
                appendTo="body"
                [placeholder]="controls.placeholder"
                [formControlName]="controls.name"
                [hourFormat]="'12'"
                [showTime]="true"
                [showButtonBar]="true"
                [readonlyInput]="true"
                [minDate]="controls.minDate || null"
                [maxDate]="controls.maxDate || null"
              >
              </p-calendar>
            </ng-container>
            <!-- end of dateTime -->
            // more switch cases
          </div>
        </ng-container>
      </ng-container>
    </div>

  </p-dialog>
</form>

Answer 1

:host ::ng-deep {

  .p-datepicker {
    top: -150px !important;
    left: 0px !important;
  }
}

tried to solve this on my own came up with this solution,, somehow its working

Screenshot for fixed issue