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

Did you ever find a solution to getting this to display at a higher z-index so that it will not be hidden in the scrolling area? I'm dealing with the same type of issue in our application. We tried to use the Renderer2 in order to pull it up to a higher level which worked for the display but then it breaks all of the expected user clicking features. Meaning every single click by the user on the calendar other than on a date number causes the calendar to close. Thanks for any input. — edjm, Oct 19 '20 at 11:58

score 3 · Accepted Answer · answered Apr 19 '20 at 19:20

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.

score 0 · Answer 2 · answered Oct 19 '20 at 16:19

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.

Angular ngx daterangepicker z-index

2 Answers2