Мат диалоговое окно Заголовок не расширяет ширину контейнера

Question

У меня есть диалоговое окно с матом, которое, кажется, не увеличивает ширину контейнера.

  <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>

Если я снимаю отступ с контейнера-диалогового окна с матом, я получаю полосы прокрутки справа и внизу.

Почему они просто не создали заголовок диалога, чтобы увеличить ширину контейнера по умолчанию?

Answer 1

Так как <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