SideNav fully expanded then visibly collapses on page load

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: SideNav fully expanded then visibly collapses on page load

harrison pro asked 9 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.

Michal Szymanski staff pro premium priority answered 8 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.

Alberto pro answered 7 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.
Write
Create snippet
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: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
sidenav
Related topics
6
error
3
Sidenav - using multiple layers of Collapse?
2
fixed sidebar not working when font 150%
2
Fontawsome style missing from some CSS
1
navbar Accessibility issues
About author
harrison
Pro User
5Support score
3Questions 0Answers
0Snippets likes 0Snippets