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 hap…

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 …

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

I had to use <div class="ion-activatable" ....> <ion-ripple-effect></ion-ripple-effect> </div> See: [image] Issue: [4.0.0-beta.19] ion-ripple-effect not working opened by amitairos on 2018-12-16 closed by manucorporat on 2018-12-16 Bug Report Ionic version: 4.0.0-bet…

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.

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"> …

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

How to use ion-ripple-effect?

Ionic Framework

mburger81 March 8, 2019, 5:35am 6

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

Topic		Replies	Views
Ionic-v4 - Card with Image - Ripple Effect not working Ionic Framework	2	1596	July 19, 2021
Ionic - Ripple effect manually ionic-v3	26	24459	August 30, 2019
How to implement ripple effect? ionic-v3	10	4190	July 19, 2021
Alpha release 40 Material Ripple Effects Disappear ionic-v3	10	2095	May 14, 2017
Ionic 5 disabled ripple effect does not work Ionic Angular	0	610	July 17, 2021

How to use ion-ripple-effect?

Related topics