How to get a mat-divider extend all the way to the ends

Viewed 1219

I have a mat-dialog with a mat-divider under the title text. I need that mat-divider extended all the way at both ends and touch the borders of the mat-dialog horizontally.

Here is my mat-dialog template html:

<h2 mat-dialog-title>This is a Dialog title</h2>
<mat-divider></mat-divider>
<mat-dialog-content>

<p> Place content here </p>
{{data}}
</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>

Here is the component scss style:

.mat-divider mat-divider-horizontal {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: red;
 }
1 Answers

Since the padding of the dialog is 24px you could do:

.mat-divider mat-divider-horizontal {
  margin: 0 -24px;
}
Related