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

Neuralgia

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. – Salamanca

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.

Neutralism

Answer 2

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

Voltz

what's not working? something from the question? something from the answers? – Ratiocination

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Slaty

Answer 3

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.

Salamanca