Topic: prevent sidenav default animation on page load
Blurthelines pro premium priority asked 5 months ago
How do i stop the default animation of the sidebar when the page loads. Each time the page loads it always animated from width=0 to its open or closed state width.
i just want it to be there in the state it is set and not always move my content to the right when loaded. FYI - i am using the side mode
any solution?
Kamila Pieńkowska staff answered 5 months ago
You can add data-mdb-hidden="false"
Blurthelines pro premium priority commented 5 months ago
mmm - i do have that attribute added. and maybe this mean the issue is not the animation ? i think the problem might be that when i use 'side' mode as default - the width for the sidebar is not there on the DOM when the page loads. hence there is always a nudge of the content (#content) to the right as the sidebar is initialized. i cant add that space via css because the sidebar will just add another bit of space (width) to the space css allocated. any thoughts?
Kamila Pieńkowska staff commented 5 months ago
Only solution I can think of is changing transitionDuration
to 0. You may prefer how it will look.
Blurthelines pro premium priority commented 5 months ago
thanks - but it doesnt look good when the content page jumps to right on load. its a nice component otherwise - but that is major problem. and i dont think it's usable as is.
Blurthelines pro premium priority commented 5 months ago
i am trying to do my own hack here - but for that i need to know the "mode" the sidenav instance is in so i can add an animation based on it. how do i get the "mode" state at any time of the instance?
Kamila Pieńkowska staff commented 5 months ago
You can get this info from instance. Example in the snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/6194605
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: computer
- Browser: chrome
- OS: mac os
- Provided sample code: No
- Provided link: No