How do you deal with div with mat-card-header-text in an material2 card?

Question

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.

Answer 1

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>