Angular Материал дизайна Datepicker проблема при открытии календаря

Question

У меня возникла проблема при использовании Angular Material Datepicker, и я не могу найти проблему root. Я не мог придумать, как сформулировать этот вопрос. Всякий раз, когда я открываю календарь и выбираю день, наложение слишком велико и выходит за границы поля. Надеюсь, это прикрепленное изображение может помочь:

У меня есть следующие импорта в модуль, в котором находится компонент:

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>

Datepicker не находится ни в одном элементе div, который изменил бы его стиль. Прямо сейчас я выбираю только год и месяц. В будущем также планируется выбрать день, и именно тогда возникнет проблема.

Answer 1

Я думаю, что у вас есть пользовательский css для table класса, подобного

table-layout: fixed;
width: 150%;

Angular, также внутренне используется структура таблицы. поэтому он переопределяет css классов материалов angular.

, поэтому в вашей пользовательской таблице css исключите класс 'mat-calendar-table', используя :not class.

, проверьте ниже styles.css файл для ознакомления проверьте здесь