Styles messed up after opening angular material calendar.

[MBolin-ADCIP7F]

After opening the angular material calendar, the next time the date picker is opened the styles are all messed up.

https://imgur.com/a/nGDz4JD

[SwetlanaZhukian]

I have the same problem

[MBolin-ADCIP7F]

Is there any bug opened for this? Seems like a big issue if you cannot use it with a material calendar?

[vitiok123]

I had this problem. This is my fix.

Add this css to styles.css(scss)

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

td.mat-calendar-body-cell { position: relative; height: 0; }

[nocturnalpie]

I'm getting this issue as well. I created a stackblitz to replicate it here: https://stackblitz.com/edit/angular-y3ta8a-hrrtb4?file=src/app/datepicker-overview-example.html

It seems the issue only appears if you open the datetime picker before opening the material date picker. If you open the material one first then you don't see the issue

---

I had this problem. This is my fix.

Add this css to styles.css(scss)

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

td.mat-calendar-body-cell { position: relative; height: 0; }

These styles do seem to fix the date buttons but the arrow next to the month picker is also doing something strange which affects the mat date picker as well.

It usually looks like this

[SchraderR]

@nocturnalpie You can look in this issue: https://github.com/h2qutc/angular-material-components/issues/269. There are some styles to fix style issues for opening mat-calendar and arrow-styles

[ArrayDonovan]

I'm getting this issue as well. I created a stackblitz to replicate it here: https://stackblitz.com/edit/angular-y3ta8a-hrrtb4?file=src/app/datepicker-overview-example.html

It seems the issue only appears if you open the datetime picker before opening the material date picker. If you open the material one first then you don't see the issue

I had this problem. This is my fix. Add this css to styles.css(scss) button.mat-calendar-body-cell { position: absolute; height: 100%; } td.mat-calendar-body-cell { position: relative; height: 0; }

These styles do seem to fix the date buttons but the arrow next to the month picker is also doing something strange which affects the mat date picker as well.

It usually looks like this

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

td.mat-calendar-body-cell { position: relative; height: 0; }

.mat-calendar-arrow { width:0 !important; } Try this setting, and the arrow size will become normal, and the error will disappear.