ng-persian-datepicker pushes the other elements down upon opening

Question

I am using this package (ng-persian-datepicker) in my Angular project for converting the Gregorian datepicker to a jalali datepicker.

Problem is, when the datepicker is opened, it pushes all of the other elements down. But I want it to open over the other elements and not push them down.

This is the form before opening the datepicker:

Image of form before opening datepicker

This is the form after opening the datepicker:

Image of form after opening datepicker

This is my html datepicker input:

<div id="dateOfBirth">
      <mat-label
        >{{
          'kyc.personal_information.date_of_birth' | icmLocale
        }}
        (MM/DD/YYYY)</mat-label
      >
      <mat-form-field appearance="outline">
        <input
          type="text"
          placeholder="01/21/1900"
          matInput
          #datepickerInput
          name="dateOfBirth"
          formControlName="dateOfBirth"
          (click)="datepickerInput.open()"
          (focus)="hideError()"
        />
        <ng-persian-datepicker
          [input]="datepickerInput"
          [uiTheme]="'dark'"
          [timeMeridian]="false"
          [timeEnable]="false"
          [dateFormat]="'jYYYY/jM/jD'"
        ></ng-persian-datepicker>
      </mat-form-field>
</div>

EDIT:

I fixed the issue by adding the following css code:

::ng-deep ng-persian-datepicker .datepicker-outer-container {
        position: absolute;
        width: 300px;
        top: 43px;
        right: -10px;
        z-index: 1000;
        background-color: $icm-dark-deep;
      }