I can't seem to wrap my head around having this container in an md card.
In my material cards, I have this:
<div class="mat-card-header-text"> </div>
I've seen other people notice it. It causes a 40px space on the left of my title. No CSS seems to affect it either.
I am using Angular 4.x and Material2.
This extra div is actually quite annoying. As it turns out though, you can use shadow-piercing to apply a style to it without changing the CSS emulation mode. You can do this using the ::ng-deep combinator as such:
::ng-deep .mat-card-header-text {
/* CSS styles go here */
margin: 0px; // for example to remove the margin
}
You can also just replace the whole header with your own CSS classes instead:
<mat-card>
<div class="your-header">
<div class="your-title">
Your title here
</div>
</div>
<mat-card-content>
Stuff goes here
</mat-card-content>
</mat-card>
Per their recent recommendation https://angular.io/guide/component-styles, this worked for me:
:host /deep/ .mat-card-header-text {
margin: 0;
}
I fixed it by providing negative left margin to md-card-title
<md-card-title style="margin-left:-8px;">