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

[willshowell]

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.

[jelbourn]

Agreed- there shouldn't be a overflow: hidden on the list item when the ripple is disabled. It would be even better if there wasn't an overflow: hidden on the list-item at all, even when the ripple is present.

[devversion]

I don't think it will be possible to drop the overflow: hidden when the ripple is present. The ripples are always big circles that would then overflow the list-item.

When the ripples are disabled, removing overflow: hidden can be done, but I'm not sure about that. It makes it more magic and could led to other side-changes in components.

[jelbourn]

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?

[devversion]

That would be the easiest solution. I did something similar in Material 1 with the underlying button. I'll play with it.

[willshowell]

I think that solution would solve #4275 too (assuming that 4275's issue is stacking context related)

[devversion]

I don't really think that those issues relate together. Issue #4275 is about overflow: hidden not working due to a missing position: relative.

[willshowell]

Ahh ok. I initially read Jeremy's answer as proposing that the md-ripple directive automatically insert a child container with position: absolute, etc. I see now that he meant to create a child container just for this specific case.

[devversion]

@willshowell Yeah exactly. Letting the md-ripple service take care of that would be really overkill.

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