1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Waves effect error

tsicclawoflight pro asked 8 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?

Bartłomiej Malanowski staff answered 7 years ago

Thanks for noticing! We'll check it

matt2 pro answered 7 years ago

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.

jonathantredford pro answered 8 years ago

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

Michal Szymanski staff answered 8 years ago

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.

jonathantredford pro answered 8 years ago

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.

Michal Szymanski staff answered 8 years ago

Can you send me your project files to m.szymanski@mdbootstrap.com ? I'll take a look at it.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
css js
About author
tsicclawoflight
Pro User 10Support score
2Questions 2Answers 0Snippets