Topic: waves.css not being referenced by mdb
Hi there,
I have spent a good hour hunting down an irritating issue when working with the MdbNavBar. The behaviour as seen is once clicking a nav bar link, the nav bar height doubles for the duration of the ripple, and then returns to it's normal height. I have tried and checked multiple points within the app and took your code examples from the site, but unfortunately was unable to resolve the issue.
After inspection it appears that within the (chrome) code console that once clicked, and new div is added to the NavBarItem with the class="ripple is-reppling". *It should be noted that on your online samples, an alternative element is added (class="waves-ripple").*
It appears that it was only when this element was added, the nav bar height changed.
Following this lead, I eventually ended up within the npm package file: *src/mixins/waves.js* where I found where the element was constructed. I then noted that there was a *src/mixins/waves.css* file within the directory as well where there is a small piece of code referring to *.ripple-parent etc*.
When I returned to the console, I found that the css was not being applied to the element with the class "ripple-parent". I can only assume that this file was not been imported properly (despite the include reference at the top of the .js file).
After I copied the contents of this file into my App.ts <style /> tag, the nav menu stopped jumping and the behaviour is as expected upon click.
Are you able to confirm if this issue will be fixed within a future release, and if it is expected that .ripple.is-reppling is the expected class to be applied in this case, rather than the .waves-ripple class as it seems odd that the online demo uses a different class to the packaged class.
Many thanks.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: 6.7.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Magdalena Dembna staff premium commented 5 years ago
I wasn't able to reproduce your issue - the styling in the most recent Pro package is the same as in the Vue live preview here: https://vue.mdbootstrap.com/#/navigation/pro/navbar and in both cases the component is receiving the required styling for
.ripple-parentclass. In order to resolve this issue I need to ask you several questions: firstly, what was your installation process? Are you using Pro package or Admin Pro? If you've chosen the vue-cli plugin to instal mdbvue, have you chosen the scss or css mode? In yourmain.jsfile have you imported bothbootstrap-css-only/css/bootstrap.min.cssandmdbvue/lib/css/mdb.min.css(in this order)? Are you using Tree shaking option?SoftWebMike pro premium priority commented 5 years ago
Hi Magdalena, thank you for your reply. I am indeed using scss, and used the vue cli "add mdb" command to install the pro package. Initially this was version 6.6, but in my attempt to fix I updated to 6.7. During the installation, I had to manually add a reference to bootstrap css only, and can confirm that both are referrenced within main.js in the stated order. I am not sure on tree shaking - I just used the standard options so am guessing this is the default value. I installed the pro package using your online guide, only deviating to install bootstrap css only. Many thanks.
Magdalena Dembna staff premium commented 5 years ago
For SCSS editable mode, the mdbvue import in
main.jsshould be:import 'mdbvue/lib/mdbvue.css'instead. Can you check if the necessary imports are present inApp.vue: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss ? If you had to addbootstrap-css-onlymanually, something must've gone wrong while using the plugin - wasn't there any error messages?