Angular Material Datepicker design issue when opening calendar

问题

I am having an issue when using Angular Material Datepicker and I can't seem to find the root problem of it. I couldn't think of a way to word this question. Whenever I open the calendar and I'm selecting the day, the overlay is too large and is past the boundaries of the box. Hopefully, this attached image can help:

I have the following imports in the module the component is in:

import { MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatOptionModule } from '@angular/material';
import { MomentDateModule } from '@angular/material-moment-adapter';

<mat-form-field>
 <mat-label>Choose a date</mat-label>
 <input matInput [matDatepicker]="picker">
 <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
 <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

The Datepicker is not in any div element that would change its styling. Right now, I'm only selecting a year and month. In the future, there are plans to select the day, as well, and that is when the issue arises.

回答1:

I think you have your custom css for table class like

table-layout: fixed;
width: 150%;

Angular date picker is also internally using the table structure. so it override's the css of the angular material classes.

so in your custom css table exclude the class 'mat-calendar-table' by using :not class.

check below styles.css file for your reference check here

来源：https://stackoverflow.com/questions/60637322/angular-material-datepicker-design-issue-when-opening-calendar