Having multiple forms in an expansion presents a unique challenge. I initially used the following code for a date picker:
<mat-form-field>
<input formControlName="date" matInput placeholder="Date" type="date">
</mat-form-field>
This method was effective, as the expansion did not conceal it (see here). However, when incorporating start and end values for both date and time, I decided to switch to ngx material daterangepicker.
The issue I encountered is that the expansion ended up covering the daterangepicker (view image). Here's the revised code for the daterangepicker picker:
<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 attempted to assign custom z-index values like:
.md-drppicker {
z-index: 9999;
}
ngx-daterangepicker-material {
z-index: 9999;
}
However, these adjustments were unsuccessful in resolving the issue. I also tinkered with the display and position properties, but to no avail.
Any insights on what might be causing this problem?
Edit: Check out this updated picture of the daterangepicker picker problem