datetime picker interoperability with date picker causing css errors

[w3sami]

hi, dt picker is exactly what i need, but having it on the same page with normal datepicker is causing problems. it break both d and dt pickers, depending on what you select first.

my markup

1. dt picker {{ 'Material dl' | trans }} <input matInput [ngxMatDatetimePicker]="materialDl" [formControl]="campaign.materialDl" name="materialDl" required /> <mat-datepicker-toggle matSuffix [for]="$any(materialDl)" > <ngx-mat-datetime-picker #materialDl> 2 date picker {{ 'Start date' | trans }} <input matInput [matDatepicker]="startDate" [formControl]="campaign.startDate" required /> <mat-datepicker-toggle matSuffix [for]="startDate" > <mat-datepicker #startDate>

if you select a date with 2. and then go to select a date time you end up with totally messed up dt picker.

( sometimes it helps to click on the body, and when focus not on date picker, it's all fine)

and the other way, if you select a dt and then go select a date, the current day, gets squished unreadable. not nearly as annoying but not nice either

using the latest packages

"@angular/material": "^13.2.1",
"@angular-material-components/datetime-picker": "^7.0.1",

and normal viewencapsulation on this page

[brandon-morgan]

@w3sami, I'm having the same issue and it appears to be caused by the .mat-calendar-body-cell mistakenly getting the position of absolute. When I change to relative it fixes the issue at least for me. Not an actual fix of course but seems to be an issue with css inheritance or something related when both exist on same screen.

[w3sami]

@brandon-morgan thank you so much!

I resolved the issue with ngx-mat-calendar { .mat-calendar-body-cell { position: relative !important; } } mat-calendar { .mat-calendar-body-cell { position: absolute !important; } } in my global styles \0/ leaving this open, since this shouldn't be fixed in userland code

[functionportal]

@w3sami Thank you. That fixed some of layout issue, but the iconography and date indicator issues remain. Here's my workaround for those issues: ngx-mat-calendar { .mat-calendar-body-cell { position: relative !important; } } mat-calendar { .mat-calendar-arrow { width: 0; height: 0; }

.mat-calendar-body-cell { position: absolute !important; height: 100%; } }

ngx-mat-datetime-content { .mat-calendar-arrow { width: 0; } }

[alixroyere]

for information, I'm no more experiencing this issue with the version 16