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

Question

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

score 20 · Accepted Answer · answered Apr 16 '18 at 14:25

20

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.

answered Apr 16 '18 at 14:25

Koen van Zuijlen

395
3
11

1

Great, thanks. Solved the problem. (Stackblitz updated to demonstrate the fact) – Jonas Andreasson Apr 18 '18 at 08:09
3

This doesn't seem to work when applied to a `` element, but it seemingly does on the `` element. [See forked Stackblitz](https://stackblitz.com/edit/angular-material-ripple-lab-bdjbqq). How does this solution change for this scenario? – mitch Sep 14 '18 at 16:37
1

If you have actions, as in 'mat-card-actions' for any buttons on the material card, make sure to include the .last-child class on this element instead of the content element. I also removed the padding from the mat-card-actions element using CSS, and this resolved the issue faced by https://stackoverflow.com/users/569531/mitch (mentioned above) – Jonathan Cardoz Feb 04 '20 at 19:01

score 12 · Answer 2 · edited May 28 '22 at 15:38

12

If you add the footer element (with or without content) you won't need additional CSS and this will lock the height when activating the ripple effect.

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

edited May 28 '22 at 15:38

Stefan Falk

23,898
50
191
378

answered Feb 10 '21 at 17:49

stupidFace

181
1
8

1

This worked for me. Even adding an empty footer eliminated the vertical expansion of the card. – Mike Yockey May 03 '21 at 04:02
1

This helped to fix the issue! Thank you. – Manaday Mavani Jul 22 '21 at 07:18
1

saved a lot time , tnx! – Avinash Lahel Mar 10 '22 at 14:34

score 4 · Answer 3 · answered Mar 26 '18 at 18:03

4

should be as easy as adding matRipple to the mat-card

    <mat-card class="action-card" matRipple>
        <mat-card-title>
            {{content}}
        </mat-card-title>
        <mat-card-content>
          desc
        </mat-card-content>
      </mat-card>

make sure you inject the MatRippleModule into your module.ts though, that threw me off for a while

answered Mar 26 '18 at 18:03

Zhang Bruce

884
1
8
23

2

I may be missing something here but this code behaves in the exact same way. The card height expands when the ripple is applied. – Jonas Andreasson Mar 28 '18 at 06:48
I also noticed this behavior before, what happened to mine is that I gave a container height like 200px, but no height on mat-card, so when clicked it's trying to expend to container height. I then give card a height property in css, then the issue disapeared. @JonasAndreasson – Zhang Bruce Mar 29 '18 at 13:10

score 2 · Answer 4 · answered Oct 16 '19 at 13:17

2

Use a div -Tag inside of mat-card -Tag. This Fix my issue.

answered Oct 16 '19 at 13:17

Muhammad Bilal

1,840
1
18
16

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

4 Answers4