打开日历时，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-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.

因此，在您的自定义 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屋！