Angular material 2, mdDialog - How to make title bar across the top of dialog box

[Ka Tech]

I'm having trouble making a coloured bar across a material 2 dialog box. With the following code I get bar which has padding/margin on each side. My aim is to get no margin around the bar. 

<div style="min-height:200px" style = "position: relative; padding: 0; margin: 0;">

<div [style.color]="color" [style.background-color]="bgColor">

Title

</div>

Dialog Content Goes Here

</div>

It looks like this:

Thinking it is do with the padding. I made the following class. However the issue then is I am unable to make the width 100% of the dialog box due to the offset. 

.card-dialog-bar {

position: relative;

margin-top: -25px;

margin-left:-25px;

margin-right:-25px;

width: 100%;

}

I highly appreciate if anyone can help get a bar across the top of the dialog box with no margins. 

[Michael Prentice]

.mat-dialog-container {
 padding: 0 !important;
}

I had to do the above rule in src/app/styles.scss in order to get it to escape encapsulation and make the change. Of course this makes your content and action element's need additional styling as well. 

You can't use ':host' in the dialog styling since the dialog element is a child of mat-dialog-container (which applies the padding), not the container itself. If the padding was applied to '.mat-dialog-container>*' instead, then ':host' styling would work like most developers would expect.

Michael Prentice

DevIntent

GDG Space Coast