Topic: Ripples not working in MDB5
When clicking on a button, ripples/waves should appear on the button.
No ripples appear. I am using MDB5 Pro 6.2.0 and just upgraded from 6.1.0. This happened on both versions.
Everything else seems to be working. What would cause the ripples not to appear? Any known issues? I copied an example from the docs page on ripples and used it below some testing HTML. None of the buttons show ripples on my site.
<a class="btn btn-danger" href="#">danger</a>
<a class="btn btn-info" href="#">info</a>
<button type="button" class="btn btn-primary btn-lg">Button from Docs</button>
Thanks for your help.
This is the answer in my case:
Be sure MDB's JS is being loaded. Make sure all deps are installed, errors will be displayed saying they cannot be resolved. For example chart.js is a node module that needed to be installed, not the chart.js file that is in MDB's /js/ directory.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: Computer
- Browser: Firefox and Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Mateusz Lazaru staff commented 1 year ago
Do you see any errors in console? Do other class-initialized components work? Like a select, for example.
webservices priority commented 1 year ago
Thanks for the suggestion to try using select. I have placed that on a page for testing. I do not have any errors in the console. But the select does not work. It appears blank and when I click on it, it only gets focus. There is no dropdown showing the options.
So I think you got me on the right track. JS is not being loaded and I thought it was. Just need to figure that out now. Thanks for the help.
Mateusz Lazaru staff commented 1 year ago
You're welcome. If you're still facing the problem, show me js import from your project, and we'll try to fix that.
webservices priority commented 1 year ago
Edit: I just realized that `chart.js` is an NPM packackage (not the JS file in MDB) as well as the others. I think this may be solved.It looks like I'm closer but am getting some errors in the Webpack build process from paths not resolving in MDB. I have copied `node_modules/mdbootstrap-pro/src/mdb/js/mdb.pro.js` in to our project directory and updated paths to point to `node_modules/mdboostrap-pro` which is where we have NPM installing MDB5 as a package. This way we can be selective about which modules we import in to the final JS.Any idea how to resolve these errors?> ERROR in ./node\_modules/mdbootstrap-pro/src/mdb/js/free/input.js 6:0-25 Module not found: Error: Can't resolve 'detect-autofill' in '/my/project/path/node\_modules/mdbootstrap-pro/src/mdb/js/free' @ ./assets/src/js/frontend/modules/mdb-pro.js 18:0-58 52:0-56:283> > ERROR in ./node\_modules/mdbootstrap-pro/src/mdb/js/pro/charts.js 1:0-383 Module not found: Error: Can't resolve 'chart.js' in '/my/project/path/node\_modules/mdbootstrap-pro/src/mdb/js/pro' @ ./assets/src/js/frontend/modules/mdb-pro.js 26:0-58 52:0-56:283> > ERROR in ./node\_modules/mdbootstrap-pro/src/mdb/js/pro/charts.js 2:0-56 Module not found: Error: Can't resolve 'chartjs-plugin-datalabels' in '/my/project/path/node\_modules/mdbootstrap-pro/src/mdb/js/pro' @ ./assets/src/js/frontend/modules/mdb-pro.js 26:0-58 52:0-56:283