Components: MatCard size increases on applying matRipple

[batbrain9392]

Bug, feature request, or proposal:

Bug

What is the current behavior?

On adding matRipple to a mat-card with mat-card-actions and clicking on the action button, the card size increases since the <mat-ripple-element> appears at the bottom and takes up some empty space.

What is the expected behavior?

<mat-ripple-element> should not take up the aforementioned extra space.

What are the steps to reproduce?

1. Add a mat-card with mat-card-actions buttons
2. Add matRipple to mat-card
3. Click on the action button
   https://stackblitz.com/edit/angular-material2-issue-2ocoap?embed=1&file=app/app.component.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.0.7
Material: 6.3.0
OS: win32 x64
Typescript: 2.7.2
Browser: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

Screenshot

[devversion]

Thanks for your issue. I'm still looking for possible solutions to fix that issue.

But closing this particular issue since there is already a similar one: https://github.com/angular/material2/issues/10898

[adarowiec]

it's still present

[rzeiler]

Use a div -Tag inside of mat-card -Tag. This Fix my issue.
<mat-card matRipple *ngFor="let row of itmes"><div><mat-card-header><div mat-card-avatar> {{row.ava}} </div> <mat-card-title>{{row.title}}</mat-card-title> <mat-card-subtitle>{{row.createdate | date}}</mat-card-subtitle> </mat-card-header> <mat-card-content> {{row.content}} </mat-card-content> </div> </mat-card>

[cyberbeast]

Or you could just add a custom style property to remove the bottom margin.
Something to the effect of -->
<mat-card-content style="margin-bottom: 0">

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}