Angular ngx daterangepicker z-index

Question

I'm having multiple forms in an expansion, and I was using this code, for a date picker,

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

Which works totaly fine, the expansion doesn't hide it (have a look), but then I had start and end values for both date and time, so I switched to ngx material daterangepicker.

My only problem is that the expansion hides the daterangepicker (have a look), so the daterangepickers code looks like this:

      <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>

I have tried to give it a custom z-index, like:

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

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

But that didnt solve the problem, tried messing with the display/position too, but I can't fix it.
Any idea what's wrong?

Edit: Here's a better picture for the daterange picker problem

Answer 1

You need to use the overflow attribute as there is no space for the calendar. I think it will resolve your issue.

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

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

I would suggest you to attach a stackblitz instance if issue still persist.

Answer 2

I'm using version the ngx-daterangepicker-material 2.4.1 on Angular 6.1.10

The issue for us was with the use of MatInput and angular-split-ng6.

The css fix for our implementation was the following

.md-drppicker.drops-down-right.ltr.shown.double.show-ranges {
    position: fixed;
}

After using the above our calendar rendered correctly over the neighboring layer and did not wrap the calendar when the area where it was launched from is smaller than the required width for displaying the calendars side by side.

Answer 3

this all not working because the ngx-daterangepicker does not work inside the mat-form-fiel