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:

 &         


        
                      

              相关标签:
       
      

Answer 1

Give a negative left-margin to the mat-card-title solve the issue.

.mat-card-title {
   margin-left: -16px;
 }

Answer 2

I Know is an old question, but still today is an issue. The way I solved was overriding it like this in the ts file:

ngAfterViewInit() {
    document.getElementsByClassName('mat-card-header-text')[0].setAttribute('style', 'margin: 0 0');
  }

Answer 3

Per their recent recommendation https://angular.io/guide/component-styles, this worked for me:

 :host /deep/ .mat-card-header-text {
     margin: 0;
 }

Answer 4

make a class for the mat-card container and add

border-collapse:collapse;

worked wonders for me.

Answer 5

mat-card-header{
  justify-content: center;
}

Answer 6

If you want to support both a version with image in the header and without, this is one possible solution. The idea is to toggle a class which fixes the margin when there is no image available (set through the link input in the example). This way to card looks fine with and without an image.

Html:

<mat-card>
  <mat-card-header [ngClass]="{'fix-margin': !link}">
    <mat-card-title>{{content}}</mat-card-title>
    <mat-card-subtitle>{{content}}</mat-card-subtitle>
    <img *ngIf="link" mat-card-avatar [src]="link">
  </mat-card-header>
  <mat-card-content>
    {{content}}
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>SHOW</button>
  </mat-card-actions>
</mat-card>

Css

.fix-margin {
  margin: 0 -8px;
}

Ts

export class component {
  @Input() content;
  @Input() link;    
}