Ionic-framework: ion-ripple-effect is not working

[jtushar53]

Bug Report

Ionic version:


[x] 4.x

Describe the Feature Request
ion-ripple-effect not working with ion-col, its just getting omitted from the html and hides the ion-col element

Describe Preferred Solution
ion-ripple-effect should add ripple effect to ion-col element as referred in the docs
https://ionicframework.com/docs/api/ripple-effect

Describe Alternatives

Related Code

<ion-grid> <ion-row> <ion-ripple-effect> <ion-col size-md="4" size-xs="12" size-sm="6" size-lg="4" *ngFor="let item of pendingitems" > <ion-card text-left> </ion-card> </ion-col> </ion-ripple-effect> </ion-row> </ion-grid>

Additional Context

[robingenz]

It also does not work with a simple div: https://codepen.io/robingenz/pen/mvGKvP

[geekzolanos]

Trying to update to Ionic 4.0.2 doesn't fix the problem.

Reviewing the RippleEffect component in source, i cannot found any procedure to capture the click event on parent. So i suppose we must to capture the event and call to addRipple method manually. I made the following workaround for this:

import { HostListener, ViewChild } from '@angular/core';
import { IonRippleEffect } from '@ionic/angular'; 

 @ViewChild(IonRippleEffect) private rippleEffect: IonRippleEffect; 
 @HostListener("click", ['$event'])
  private onClick(e: MouseEvent) {
    this.rippleEffect.addRipple(e.x, e.y);
  }

However, besides the ripple effect is being created, the resultant div (.ripple-effect) it doesn't get removed after a while, the addRipple method defines a setTimeout for this, but for some reason it doesn't get triggered. So we must remove it manually reusing a non exported function on the file:

private removeRipple(ripple: HTMLElement) {
  ripple.classList.add('fade-out');
  setTimeout(() => {
    ripple.remove();
  }, 200);
}

Then, we need to catch the '.ripple-effect' node under the component's shadow root and remove it when the effect gets finished. Here's the full example:

import { HostListener, ViewChild, ElementRef } from '@angular/core';
import { IonRippleEffect } from '@ionic/angular';

@ViewChild(IonRippleEffect) private rippleEffect: IonRippleEffect;
@ViewChild(IonRippleEffect, {read: ElementRef}) private rippleEffectRef: ElementRef;

@HostListener("click", ['$event'])
  private onClick(e: MouseEvent) {
    this.rippleEffect.addRipple(e.x, e.y).then(() => {
      let ripple: HTMLElement = this.rippleEffectRef.nativeElement.shadowRoot.querySelector(".ripple-effect");
      this.removeRipple(ripple);
    });
  }

  private removeRipple(ripple: HTMLElement) {
    ripple.classList.add('fade-out');
    setTimeout(() => {
      ripple.remove();
    }, 200);
  }

PS: Also it's required add a 'position: relative' and a 'overflow: hidden' to parent node. Otherwise, the ripple effect will overflow the container's borders.

[kensodemann]

Added to backlog. I am working with a community member who is also running into this.

[brandyscarney]

There are two reasons this doesn't work:

1) The ion-ripple-effect needs the parent element to have position: relative because it is absolutely positioned, otherwise it will just go over everything on the page.
2) It looks for the ion-activatable class on the parent element because we use this to determine whether or not an element is clickable.

I've updated the Codepen from @robingenz to show it working with the div: https://codepen.io/ionic/pen/PoYQMzO

_Note: I also added user-select: none to avoid selecting the text in the div on click_

I believe this could just be a documentation issue.

[brandyscarney]

I updated the documentation for ripple effect to include steps on adding the CSS and class: https://github.com/ionic-team/ionic/blob/master/core/src/components/ripple-effect/readme.md

I think the extra CSS is something we could add to .ion-activatable in the ionic CSS. We could possibly add the class by default to the ripple parent, but I think being able to toggle this class with a disabled element gives the user more control.

[nguyenkien]

However, besides the ripple effect is being created, the resultant div (.ripple-effect) it doesn't get removed after a while, the addRipple method defines a setTimeout for this, but for some reason it doesn't get triggered. So we must remove it manually reusing a non exported function on the file:

After digging ionic source code, I found out this way will remove it

ripple.addRipple(x, y).then(remove => remove());

[brandyscarney]

I'm going to close this since it seems it was an issue with the documentation and the usage has been updated here: https://ionicframework.com/docs/api/ripple-effect#usage

I updated the above Codepen to include an example of the ripple in both a row & columns in a grid: https://codepen.io/brandyscarney/pen/BaKeRNM

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.