16
<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>
<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>
Vega
  • 27,856
  • 27
  • 95
  • 103
veeru
  • 161
  • 1
  • 1
  • 4
  • i am using bootstrap and flex – veeru Apr 28 '18 at 21:49
  • When I am dynamically generating the mat-card the content length will vary and that is causing alighnment issues with button . I want button to be at bottom all the time – veeru Apr 28 '18 at 22:17

3 Answers3

31

Add in stylesheet:

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

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

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

font: https://github.com/angular/material2/issues/11094

Eriel Miquilino
  • 433
  • 4
  • 7
3

Solutions if you are using

<mat-card>
  <mat-card-header>
    <mat-card-title>title</mat-card-title>
    <mat-card-subtitle>subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
  
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>Ok</button>
  </mat-card-actions>
</mat-card>
  • add a class to the mat-card .card-internals { min-height: 200px; justify-content: space-between; display: flex; flex-direction: column; }

i you rather want a spacing like this

header
content

action

set

display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap;

on mat card and margin: auto 0 0; on the mat card actions

Ivan Tarskich
  • 1,332
  • 1
  • 12
  • 19
0

If you use bootstrap you can also do it like this:

<mat-card class="h-100">
    ...
    </mat-card-content>
    <div class="flex-fill"></div>
    <mat-card-actions>
    ...
</mat-card>

Where flex-fill uses the following css:

.flex-fill {
    flex: 1 1 auto !important;
}

and h-100:

.h-100 {
    height: 100% !important;
}
Snaketec
  • 471
  • 2
  • 14