Angular ngx daterangepicker z-index

Question

У меня есть несколько форм в расширении, и я использовал этот код для выбора даты,

<mat-form-field>
  <input formControlName="date" matInput placeholder="Dátum" type="date">
</mat-form-field>

, который работает отлично, расширение не скрывает это ( посмотрите) , но тогда у меня были начальные и конечные значения для даты и времени, поэтому я переключился на ngx материал daterangepicker .

Моя единственная проблема в том, что расширение скрывает указатель даты (посмотрите) , поэтому код средства выбора даты выглядит следующим образом:

      <mat-form-field>
        <input
          matInput
          ngxDaterangepickerMd
          name="daterange"
          placeholder="Choose date"
          applyLabel="Okay"
          startKey="start"
          endKey="end"
          firstMonthDayClass="first-day"
          lastMonthDayClass="last-day"
          emptyWeekRowClass="empty-week"
          lastDayOfPreviousMonthClass="last-previous-day"
          firstDayOfNextMonthClass="first-next-day"
          [autoApply]="options.autoApply"
          [linkedCalendars]="options.linkedCalendars"
          [singleDatePicker]="options.singleDatePicker"
          [showDropdowns]="true"
          formControlName="date"

          [showWeekNumbers]="options.showWeekNumbers"
          [showCancel]="options.showCancel"
          [showClearButton]="options.showClearButton"
          [showISOWeekNumbers]="options.showISOWeekNumbers"
          [customRangeDirection]="options.customRangeDirection"
          [lockStartDate]="options.lockStartDate"
          [closeOnAutoApply]="options.closeOnAutoApply"
          [opens]="opens"
          [drops]="drops"
          [timePicker]="timePicker"
        />
      </mat-form-field>

Я пытался дать это пользовательский z-index, например:

.md-drppicker {
  z-index: 9999;
}

ngx-daterangepicker-material {
  z-index: 9999;
}

Но это не решило проблему, попытался поэкспериментировать с дисплеем / положением, но я не могу это исправить.
Есть идеи, что случилось?

Редактировать: Вот лучшая картина для проблемы выбора диапазона данных

Answer 1

Вам необходимо использовать атрибут переполнения, так как в календаре нет места. Я думаю, что это решит вашу проблему.

.md-drppicker {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

ngx-daterangepicker-material {
  z-index: 9999;
  overflow: auto; // also try overflow-y;
}

Я бы посоветовал вам прикрепить экземпляр stackblitz, если проблема не устранена.