How to use ion-ripple-effect?

Hello,

I’m trying to use ionic-ripple-effect in ionic 4 according to the documentation with a div element:

<div style="height: 100px; width: 100%; background: green; position: relative">
  <ion-ripple-effect></ion-ripple-effect>
</div>

However, it does not work (when clicking the div, nothing happens).
When wrapping it inside an ion-item, it does work though.

<ion-list>
  <ion-item button>
      <ion-ripple-effect></ion-ripple-effect>
      <ion-label>Something</ion-label>
  </ion-item>
</ion-list>

Does anybody know how to make it work with any element? Thank you!

1 Like

Could you try to add ion-activatable to your div and check if that solve the issue?

<div ion-activatable ....>
  <ion-ripple-effect></ion-ripple-effect>
</div>

if not, :frowning:
if yes, maybe it would be good then to add a request for docs improvements in https://github.com/ionic-team/ionic-docs because I see that this is not displayed in the doc

4 Likes

Thank you, this works! I’ll write a request for doc improvements then

2 Likes

I had to use

<div class="ion-activatable" ....>
  <ion-ripple-effect></ion-ripple-effect>
</div>

See:

2 Likes

As of v4.0.0, this is still the case … using class="ion-activatable" i mean.

You may also need to set position: relative on the element containing ion-ripple-effect. And also keep in mind you may want to play with overflow as well to determine how the ripple behaves.

3 Likes

Can I ask if you try to simulate a button on a div with click event?

Just in case; as it took me a while again to make ripple effect working, the key is to not forget to add ion-activatable as style class.

Not ok:

<button>
        <ion-ripple-effect></ion-ripple-effect>
        <ion-icon name="close"></ion-icon>
    </button>

Ok:

<button class="ion-activatable">
        <ion-ripple-effect></ion-ripple-effect>
        <ion-icon name="close"></ion-icon>
    </button>
2 Likes

I also had to wrap the button with a div
and give it position:relative, or the ripple effect will go through entire container.
since it gave itself a position absolute and left top 0.
I tried giving button position relative, but that resulted in some weird yellow border expending while clicking

1 Like