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.

disableRipple on list item leaves ripple class with overflow:hidden side effect

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When using disableRipple on a list item, .mat-ripple class should be removed.

What is the current behavior?

.mat-ripple class remains on the mat-list-item-content.

What are the steps to reproduce?

https://plnkr.co/edit/lO8Eudx4GFgevN4XAy3n?p=preview

What is the use-case or motivation for changing an existing behavior?

Justification here. The .mat-ripple class adds overflow: hidden.

It may be entirely valid that list items should always have overflow: hidden on their content, but that should be done explicitly and not through a side effect of the ripple class.

Issue Analytics

State:
Created 6 years ago
Comments:9 (8 by maintainers)

Top GitHub Comments

2reactions

jelbourncommented, Apr 21, 2017

Why not have the ripple container be a child of the list item that is position: absolute; left: 0; top: 0; right: 0; bottom: 0 with overflow: hidden?

0reactions

angular-automatic-lock-bot[bot]commented, Sep 5, 2019

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.}

Top Results From Across the Web

MatRipple Continues To Show No Matter What - Stack Overflow

To remove the ripple effect you can just add the following to your styles.scss file: .mat-radio-ripple { display: none; }.

List - How to disable dx-list-item ripple effect on material theme

Hi, Is there any way to disable ripple effect on dx-list-item when material theme has been applied. You can check this.

HOW TO: create the ripple effect from Material Design

HOW TO: create the ripple effect from Material Design ... We could do this with CSS pseudo elements but the effect won't be...

UNPKG - @angular/material

_disableRipple = false;\n return _this;\n }\n Object.defineProperty(class_1.prototype, \"disableRipple\", {\n /**\n * Whether the ripple effect is disabled ...

JDI Light Framework - GitHub Pages

JDI Light Framework. JDI Light is a powerful Test Automation Framework that helps to make your tests fast, sustainable and provides obvious and...