Closed ManadayM closed 3 years ago
This is working as expected. You should set an rgba
color with an alpha value. E.g. rgba(255, 0, 0, 0.5)
.
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.
I want to use custom colors for the ripple effect to match with the container colors. However, I found that setting a custom ripple color hides the content of the container element.
Reproduction
The issue can be reproduced on the official Angular Material example page as well.
Steps to reproduce:
color
input field's value to#E0F7FA
or whatever other color is preferred.Click me
button/div on that page.Expected Behavior
It should not hide the container element's content. Worth noting it is not hiding the container element's content when you don't set the custom color.
Possible fix
In the Chrome Dev Tools I added a conditional breakpoint on the following line https://github.com/angular/components/blob/23dfbbb238b29fb3cc2bda680186cf0a9b8c40f1/src/material/core/ripple/ripple-renderer.ts#L133
Then I set
ripple.style.zIndex = -1
through console to put the dynamically generated ripple element behind the container element. This fixes the issue and the textual content remains visible during the ripple effect animation.Submitting this as an issue instead PR as I don't know if this is an ideal/optimal solution. 😊
Environment