mat-grid-list with a mat-card and mat-card-actions/mat-card-footer

0
votes

I have the following code, in angular 6 and material design:

<div class="grid-container">

  <h1 class="mat-h1">Candidatos</h1>

  <mat-grid-list cols="5" gutterSize="20px" class="list-candidatos">

    <mat-grid-tile *ngFor="let candidato of candidatos">

      <mat-card class="candidato-card">

        <mat-card-header>
          <mat-card-title>{{candidato.nome}}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
          &nbsp;
        </mat-card-content>

        <mat-card-actions>
          <button mat-button>Edit</button>
        </mat-card-actions>

      </mat-card>

    </mat-grid-tile>

  </mat-grid-list>

</div>

And the css

.list-candidatos {
  width: 93%;
  margin: 20px auto;
  margin-top: 60px;
}

.candidato-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

But no matter what I change in the css I was not able to make the mat-card-actions or the mat-card-footer keep in the bottom of card. So:

  1. The structure is right or is missing something?
  2. If its right, how to put the mat-card-actions/mat-card-footer in the bottom of mat-grid-tile?
2
typescriptangular-materialangular6angular-material-6
Have you imported MatCardModule? Your example code looks fine but it doesn't include the mat-card-footer so this is probably not your real code. Create a working StackBlitz example or at least post all your actual code. - G. Tranter
The piece of code I put only contains the mat-card-actions, but I tried with mat-card-footer and neither look to work. Sorry about the confusion# - Leonardo Guerra
Just in case, I create: angular-xtf5eq.stackblitz.io To code: stackblitz.com/edit/angular-xtf5eq - Leonardo Guerra
Footer is in the correct position if you don't use height: 100% on the mat-cards. It might be a bug. I don't think there is anything 'wrong' with your code other than using height on the cards. - G. Tranter

2 Answers

2
votes

Try this in CSS , it will solve the footer issue

.mat-card{
  display:flex;
  flex-direction: column;
}

.mat-card-header {
  flex-shrink: 0;
}

.mat-card-content{
  flex-grow: 1;
  overflow: auto;
}
0
votes

Try to put a mat-card (with or without footer,image or header) or a custom component which use mat-card with fxFlex value inside a div or whatever element with fxLayout="row wrap like this:

<div fxLayout="row wrap">
    <mat-card *ngFor="let obj of objects" fxFlex="50">{{obj}}</mat-card>
</div>

This question is similar to this one