Topic: Sidenav height transitions

Marvin Herbold priority asked 3 years ago

The transition for sidenav is currently set up as :

transition: all 0.3s linear 0s;

This means that the sidenav will also transition when the height changes. This makes no sense. The sidenav height should always be 100%. But if you resize your web browser page, you can see it slowly animate to the new browser height. This looks ugly and is lazy.

You can see what I mean by visiting your own home page and changing the height of the web browser. The height of the sidenav slowly crawls to catch up.

I have to override this behavior by doing:

.sidenav { transition: width 0.3s linear 0s, transform 0.3s linear 0s !important; }

Please fix this.

Grzegorz Bujański staff answered 2 years ago

Thanks for reporting this, we will fix it as soon as possible.

Marvin Herbold priority answered 3 years ago

Also note that my fix is not a complete fix - MDB does programatically, via javascript while the window is being resized, apply a similar lazy "transition: all 0.3s linear 0s;" style to the element identified by the sidenav-content. I have no way to override this. This really needs to be changed to be { transition: width 0.3s linear 0s, transform 0.3s linear 0s !important; } instead so it doesn't try to animate the height.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.1
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No