时间戳

首页 > 解决方案 > Mat对话框标题不扩展容器的宽度

html - Mat对话框标题不扩展容器的宽度

问题描述

我有一个似乎没有扩大容器宽度的垫子对话框。

  <div mat-dialog-title class="blue-gradient">Confirm</div> 
  <div mat-dialog-content>
   {{information}}
  </div>
<div mat-dialog-actions align="end">  
    <button  (click)="closeDialog(true)">Yes</button>
    <button  (click)="closeDialog(false)">Cancel</button>
</div>

如果我从 mat-dialog-container 中取出填充物，那么我会在右侧和底部看到滚动条。

他们为什么不默认创建一个对话框标题来扩展容器的宽度？

标签： htmlcssangular

解决方案

由于<mat-dialog-container>具有默认填充，因此它显示mat-dialog-title,mat-dialog-content和mat-dialog-actions.

要删除 的左右和顶部间距mat-dialog-title，您可以使用下面的 css 考虑 mat-dialog-container 具有 24px 填充。

.mat-dialog-title {
    margin: -24px -24px 20px -24px;
    display: block;
    padding: 24px;
}

例子 -

https://stackblitz.com/edit/mat-dialog-example-zkqu5m?file=app%2Fconfirmation-dialog.component.ts

推荐阅读