Angular 5 Material Dialog box with header strip on top
I just played around using the Inspector Tool and this can be achieved using this:
.mat-dialog-container {
padding-top: 0 !important;
}
dialog-overview-example-dialog.ng-star-inserted > div {
margin-right: -24px;
margin-left: -24px;
}
.mat-dialog-actions {
margin-right: 0 !important;
margin-left: 0 !important;
}
.mat-dialog-title {
margin-top: 15px !important;
}
Note: I haven't looked for any solution which is provided by the framework itself.
Use the build in toolbar that is part of material.
<h4 mat-dialog-title>
<mat-toolbar role="toolbar" class="task-header">
<span> Dialog Title</span>
<span class="fx-spacer"></span>
<button mat-icon-button (click)="close()">
<mat-icon mat-list-icon>close</mat-icon>
</button>
</mat-toolbar>
</h4>
<div mat-dialog-content>
Modal Content here
</div>
Custom CSS for header
.task-header {
background-color: transparent;
padding: 0 5px;
height: 20px;
}
.fx-spacer {
flex: 1 1 auto;
}