prevent sidenav default animation on page load


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


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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