angular5angular-material-5

Adding ripple to mat-card without the card expanding on click/touch

Im trying to add a ripple effect to a card using angular material. The ripple effect works the way it supposed except that it expands the hight of the card when the effect is active. How can I stop the card from expanding?

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
</mat-card>

Stackblitz that demonstrates the behaviour

Solution

  • Add a class (i.e. last-child) to the last child of your mat-card (in your case mat-card-content) and define the following style:

    .mat-card .last-child {
  margin-bottom: 0;
}

    The problem is that matRipple adds an zero-height element to the mat-card while Angular Material only removes the margin-bottom from the last child.