Ripple effect on button does not work in Ultima 9

Post Reply
comanlaviniaelena
Posts: 10
Joined: 18 Aug 2020, 10:20

25 Aug 2020, 10:45

Hi,

I've updated my project from Angular 8, Ultima Theme 8 to Angular 9, prime ng 9 and ultima theme 9.
Ripple effect on buttons does not work anymore.

In ultima 8, ripple effect was created by default as:
<span class="ink ripple-animate" style="height: 85px; width: 85px; top: -25.4688px; left: 17.7656px; pointer-events: none;"></span>

In ultima 9, ripple effect is not added at all.

Could you please help?

merve7
Posts: 690
Joined: 12 Sep 2017, 10:44

31 Aug 2020, 16:34

Hi,
Does your app.main.component.ts file include ripple effects codes? Could you please check?

User avatar
asesovici
Posts: 25
Joined: 13 Mar 2018, 16:35

01 Sep 2020, 10:51

Hi merve7, I picked up this issue from comanlaviniaelena.

Our app.main.component.ts file still includes the ripple effects code, yes. As far as I could debug, the problem seems to be related to the execution timing of the following line:

Code: Select all

document.addEventListener('DOMContentLoaded', this.rippleInitListener);
By the time the rippleInitListener is bound to the DOMContentLoaded event, hasn't this been executed already?

If I try to move the content of the init() function to bindRipple(), the ripple effect works as expected:

Code: Select all

  
  bindRipple() {
    this.rippleMouseDownListener = this.rippleMouseDown.bind(this);
    document.addEventListener('mousedown', this.rippleMouseDownListener, false);
  }
However, I can't figure out why the binding to the DOMContentLoaded event works in the Ultima theme showcase and it also worked for us in Ultima 8.
PrimeFaces 8.0 | JSF 2.2 | Payara 5.194
PrimeNG 9.1.3 | Angular 9.1.12

User avatar
asesovici
Posts: 25
Joined: 13 Mar 2018, 16:35

09 Sep 2020, 16:38

Hi merve7,

Any chance you managed to check this issue?

We also noticed that the ripple effect isn't working in the PrimeNG Ultima demo either, when navigating to the Login page: https://www.primefaces.org/ultima-ng/#/login.
In addition to this, if you happen to navigate to it from another page (e.g. Dashboard) and then go back to it, then the ripple effect stops working in the previous page as well.
PrimeFaces 8.0 | JSF 2.2 | Payara 5.194
PrimeNG 9.1.3 | Angular 9.1.12

mert.sincan
Posts: 4638
Joined: 29 Jun 2013, 12:38

09 Oct 2020, 22:20

Hi,

We'll check and get back to you asap.

Best Regards,

comanlaviniaelena
Posts: 10
Joined: 18 Aug 2020, 10:20

30 Oct 2020, 12:58

Hello,

Any news on the ripple effect problem?

Thank you in advance,
Lavinia

merve7
Posts: 690
Joined: 12 Sep 2017, 10:44

10 Nov 2020, 15:57

Hi,
We fixed the ripple effect issue on the login page (https://www.primefaces.org/ultima-ng/#/login) and released it with the new version(v10.0.1).
Also, we changed ripple effect implementation with v10 please check from the ripple page (https://primefaces.org/primeng/showcase/#/ripple)

Best Regards,

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest