Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Card] Extra margins show when using ripple

See original GitHub issue

When matRipple is added to a <mat-card>, the card expands on click.

Reproduction: https://stackblitz.com/edit/angular-1mherw?file=app/card-overview-example.html

This is due to the styling rule that says every element in the card except for the last should have bottom margin. When the ripple is added, the last element is no longer last and so it gains the margin bottom.

https://github.com/angular/material2/blob/master/src/lib/card/card.scss#L190

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:14 (5 by maintainers)

Top GitHub Comments

7reactions

xgui3783commented, Aug 22, 2019

Stumbled on this issue as well. After some inspection, it seems adding and empty (or not empty) <mat-card-footer> as the last child solves the issue.

https://stackblitz.com/edit/angular-material2-card-ripple-adgv8u

1reaction

litwin90commented, Jun 4, 2021

I faced the same issue. I managed to avoid it by using an empty mat-card-footer . In this case :last-child won’t be applied

Top Results From Across the Web

Adding ripple to mat-card without the card expanding on click ...

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

Ripple Margin Trading - Buying XRP with Leverage - Coin Guru

Ripple margin trading is a crypto trading strategy whereby you pledge your Ripple (XRP) tokens as collateral to borrow additional funds to purchase...

The Mystery Behind 20 XRP Fee For Ripple Address - CoinSutra

What Is 20 XRP Ripple Reserve? ... Ripple is a unique crypto asset which has built-in rules of minimum balance for using its...

Fun with custom:button-card - Dashboards & Frontend

An extra tip on your buttons that have a white background: The button-card defaults to white background if the state of the entity...

Bootstrap Spacing - examples & tutorial

Responsive spacing with the latest Bootstrap 5. Margin or padding values added to an element or a subset of its sides with simple...