Waves effect error

Topic: Waves effect error

tsicclawoflight pro asked 9 years ago

I'm using the waves effect on a collapsible-header in the sidenav. Every time I click the header, the waves overlay stays --> the header becomes darker every click. After a few clicks, it becomes unreadable. Any ideas about what could be wrong?

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

Can you send me your project files to m.szymanski@mdbootstrap.com ? I'll take a look at it.

Add comment

jonathantredford pro answered 9 years ago

0 0 Best answer

I am also having the same issue where the wave effect makes it darker (or lighter if I use .waves-light as well). When I inspect the element, there are multiple instances of this code:

<div class="waves-ripple " data-hold="1459550115766" data-scale="scale(11)" data-x="3.625" data-y="36" style="top:36px;left:3.625px;-webkit-transform:scale(11);-moz-transform:scale(11);-ms-transform:scale(11);-o-transform:scale(11);transform:scale(11);opacity:1;-webkit-transition-duration:750ms;-moz-transition-duration:750ms;-o-transition-duration:750ms;transition-duration:750ms;-webkit-transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);-moz-transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);-o-transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);"></div>

I am using MDBootstrap in a Meteor.js app.

Add comment

Michal Szymanski staff pro premium priority answered 9 years ago

0 0 Best answer

Problem of Tsicclawoflight occurs, because he implemented our code twice (one time by using mdb.js and the second time by adding modules). Modules are not required if you use mdb.js.

Add comment

jonathantredford pro answered 9 years ago

0 0 Best answer

Thanks Michal, removing the modules folder as well as mdb.js (leaving only the mbd.min.js file) fixed the issue

Add comment

matt2 pro answered 8 years ago

0 0 Best answer

I'm running into this issue right now (pro version) and I have confirmed I'm only loading the mdb.min.js file once. Every click on the button adds the waves-ripple div element, but they don't disappear. They just persist. However, I believe I know what is causing this: When you change the button text while the wave effect is happening, the wave doesn't get cleaned up. My use case is that I'm submitting an ajax form and setting the button text from "Submit" to "One moment..." while the form data is being processed on the backend. I'm likely going to change this behavior anyway, but I thought I'd bring this up.

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago