Sidenav height transitions

Topic: Sidenav height transitions

Marvin Herbold pro premium 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.

Add comment

Marvin Herbold pro premium priority answered 3 years ago

0 0 Best answer

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.

Add comment

Grzegorz Bujański staff answered 3 years ago