打开日历时的 Angular Material Datepicker 设计问题 [英] Angular Material Datepicker design issue when opening calendar

问题描述

我在使用 Angular Material Datepicker 时遇到问题，我似乎找不到它的根本问题.我想不出办法来表达这个问题.每当我打开日历并选择日期时，叠加层太大并且超出了框的边界.希望此附加图片可以提供帮助:

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>

Datepicker 不在任何会改变其样式的 div 元素中.现在，我只选择一年和一个月.以后也有计划选择那天，也就是出现问题的时候.

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.

推荐答案

我想你已经为 table 类自定义了 css 像

I think you have your custom css for table class like

table-layout: fixed;
width: 150%;

Angular 日期选择器也在内部使用表结构.所以它覆盖了角度材料类的 css.

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

因此在您的自定义 css 表中，使用 :not 类排除类 'mat-calendar-table'.

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

检查下面的 styles.css 文件以供参考 在这里检查

check below styles.css file for your reference check here

这篇关于打开日历时的 Angular Material Datepicker 设计问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！