[Card] Extra margins show when using ripple

[andrewseguin]

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

[simeyla]

Same for mat-table : #11165 (well technically the opposite problem where the padding disappears!)

[devversion]

@andrewseguin I tried looking into the issue but couldn't find anything that allows us to skip .mat-ripple-element items when querying for the :last-child.

Technically the ripple elements are valid children that can be also the last element. If we try something like: nth-last-child(1):not(.mat-ripple-element) the counter won't reset, and we'd never reach mat-card-content.

I also tried to select the element before the first .mat-ripple-element if there are ripples, but apparently CSS is not providing a selector to query for elements before another one.

Just wanted to summarize my findings real quick. Maybe someone does have some other ideas. I will keep looking into it.

[dulikmixail]

Problem not resolve

[kfrankiewicz]

Please take a look at this thread: #14981 - @devversion explanation is clear, To fix the problem, add this code to your global CSS file:

div.mat-ripple-element {
  position: absolute !important;
}

[mina-skunk]

Work around doesn't work
https://stackblitz.com/edit/angular-material2-card-ripple?file=styles.scss

[xgui3783]

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

[non4me]

The bug appears not only on the <mat-card>, but also on any other container.
Its essence is that during animation matRipple adds side margin to the last element of the container, equal to the gap between the elements inside the container. This means that it ignores the CSS rule: div:last-child {margin-left: 0} (or in case column: div:last-child {margin-bottom: 0}).

A possible workaround is to add the margin to the last element on its own, if design allows it. Or wrap container to other and set matRipple on wrapper.

In this particular topic starter case, the workaround may look like:

<mat-card matRipple>
  <div style="margin-bottom: -15px">
    <mat-card-content>  Click this card to see it expand  </mat-card-content>
  </div>
</mat-card>

More details here: https://stackblitz.com/edit/angular-material2-matripple-i5ugtwissie?file=app/app.component.html