Topic: SideNav fully expanded then visibly collapses on page load

harrison pro asked 7 years ago


My side nav is fully expanded then flashes shut when the page finishes rendering. Is there some style I am missing for it to start as collapsed when the page renders? I noticed the same thing on this website, but I am not using wordpress.

Alberto pro answered 5 years ago


Harrison, if you are using Angular you can use the [hidden] binding.
add
[hidden]="_isSideNavHidden"
to the mdb-sidenav and in your component code set it to false in the ngAfterViewInit hook. Use a setTimeout call to avoid the change detection error. The navbar has the same issue and you can do the same there.

Michal Szymanski staff answered 7 years ago


That's because javascript which keeps collapsible elements closed, is loaded at the end. First come css and html, so sidenav is rendered with opened collapsible elements, at this moment there is no javascript which can keep them closed. It happens a moment later.

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No