Angular Material Ripple appears on top of object content or text

Question

I have created a sample div with text in it, as in

<div class="mydiv"  matRipple matRippleColor="rgba(255,255,0,.5)">
  Click Me!
</div>

It works as expected, except the yellow appears OVER the "Click Me" text, which looks wrong. Am I missing something here?

See https://stackblitz.com/edit/angular-ripple

That's the expected behavior. The amount the text color changes is relative to the alpha. Try dropping alpha to 0.2 or so to make the text color change less dramatic. Check out the official example and type in a color to see it is the expected behavior: https://material.angular.io/components/ripple/examples — Z. Bagley, Mar 14 '19 at 19:02
as @Z. Bagley says, it's the normal behavior but there is a hack to do that. (See my answer) — Wandrille, Mar 14 '19 at 19:09

Wandrille · Accepted Answer · 2019-03-14T19:07:20.297

When you inspect the element (I have the code from this example), you can notice than the color div is created after the text. So NO, you can't achieve what you want properly.

<div _ngcontent-c21="" class="example-ripple-container mat-elevation-z4 mat-ripple mat-ripple-unbounded" matripple="">
   Click me
   <div class="mat-ripple-element" style="left: -107.606px; top: -161.106px; height: 511.211px; width: 511.211px; background-color: rgba(255, 255, 0, 0.5); transition-duration: 400ms; transform: scale(1); opacity: 0;"></div>
</div>

BUT there is a hack to do that:

.mat-ripple-element{
  z-index:-1 !important;
}
.mat-ripple{
  z-index:50; // 50 for example
}

Angular Material Ripple appears on top of object content or text

1 Answers1