The ripple causes strange margin - reproduced

[kfrankiewicz]

Related issues:
#10898
#12210

The ripple creates strange margins, when position: relative is added to the children divs in the global CSS. The recent angular versions. In my case I used mat-tab-group with the ripple.

It causes this problem:

https://stackblitz.com/edit/angular-m5y3yx?file=src%2Fapp%2Fapp.component.html

It seems the position: absolute (or whatever it is) from the ripple is overwritten by the global position.

The ripple works well when I add this globally:

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

[devversion]

Hi @kfrankiewicz, thanks for your issue!

The matRipple is internally used by a lot of Angular Material components, but I realize there are a few use-cases where the matRipple does not work as expected. Though the ripple is more intended to be used in advanced cases, where other surrounding element styles are properly overwritten so that the ripple can behave properly.

Most of the time ripples can be launched safely by creating an absolute overlapping transparent container that acts as the ripple container and does not affect the parent elements. this can be seen in the lib/button implementation for reference.

Also, I commented on your proposal #14982. Let's track this issue for compatibility with the <mat-card> in the existing issue #10898. Thanks!

We can also have an issue for the tab-group compatibility, but we need to figure out if we actually want to guarantee that every Material component is working fine with additional custom ripples. Developers should be always able to properly use the `matRipple´ directive as long as the surrounded elements are properly handled.

[angular-automatic-lock-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.}