Latest version as a child element of a mat-form-field

[kimlambiguitoppolis]

Versions

• Angular version: 13
• component version: 6.0.4

Describe the bug calendar is not displayed and is hidden behind other elements.

To Reproduce Steps to reproduce the behavior:

<table>
 <tr>
   <td>
<mat-form-field appearance="outline">
    <input type="text" matInput ngxDaterangepickerMd opens="left"
        [timePicker]="true" [timePickerIncrement]="1" [timePicker24Hour]="true"
        [linkedCalendars]="true"
        [locale]="{ format: 'DD MMM YYYY HH:mm', firstDay: 1 }" startKey="startDate"
        endKey="endDate"
        (datesUpdated)="onTaskDateRangeChange2($event, task)"
        [ngModelOptions]="{standalone: true}" [ngModel]="task['dateRangeModel']" />
</mat-form-field>

 </td>
</tr>
</table>

Expected behavior calendar should be fully displayed, unlike the image below

Screenshots

If there is more info needed. please let me know. i've been stuck with this issue for a while.

[kimlambiguitoppolis]

closing as the cdk version was reverted on v4 as mentioned below.

Hey @kimlambiguitoppolis, the Material upgrade I did was reverted in version 4.0.0 because some people didn't like adding @angular/material as an extra dependency to a library that aims to be a Material component ;)

If you want you can use version 3.0.1 which still uses the official CDK, or you can use the package I published recently from my fork over at https://github.com/Timebutt/ngx-daterangepicker-material which supports Angular 15 (I use this extensively in my own projects). Package can be found here. Let me know!