Topic: Sidenav moves towards screen center

itay pro asked 4 years ago

Expected behavior

Sidebar should appear on the edge of the window

Actual behavior

Sidebar moves towards the center

It looks as if the fix in 8.7.0, "* Sidenav - resolved problem with closing sidenav when mobile keyboard appear on the screen," adds a transform: translateX(-100%); to ul#slide-out, where once it didn't, causes the sidebar to shift from the edge on chrome browser

Perhaps applicable only to RTL layout, on desktop chrome (not related to mobile nor keyboard)

Further examinations show that the menu moves when downloading a file from the browser, causing screen height to change, presumably similar to keyboard appearing on the screen on mobile devices

This should not happen on desktop devices, while its effect on RTL mobile is still unknown

Resources (screenshots, code snippets etc.)

Arkadiusz Idzikowski staff commented 4 years ago

Thanks, we will take a closer look at that.

itay pro answered 4 years ago

Returned in 9.3.0 :-(

When a file is downloaded, and visible viewport height changes, right sidebar disappears to the right.

It happens because both mdb-side-nav and the child ul translateX(0%) changes to translateX(100%)

This is the code:

<mdb-side-nav #sidenav class="fixed" [fixed]="true" [side]="'right'" [sidenavBreakpoint]="1440">

a fix is adding this rule as a patch (while keeping sliding menu on mobile):

@media only screen and (min-width: 1440px) {
  ul#slide-out {
    -webkit-transform: translateX(0%) !important;
    transform: translateX(0%) !important;

I don't like !important

Please avoid breaking changes.

itay pro commented 4 years ago


Arkadiusz Idzikowski staff commented 3 years ago

We are still working on the issues with the side nav and viewport width/height.

itay pro answered 4 years ago

Vertical height change causes the sidebar to shift. It happens when the user downloads a file, causing the download bar to appear at the bottom, reducing screen height.

Yes, sidebar is fixed [fixed]="true"

Since [side]="'right" is new to me (probably didn't exist when I started), yes, I use many custom styles in order to support RTL

Adding [side]="'right" allows me to reduce some of the styles so now I experience the sidebar disappearing to the right edge, instead of shifting towards the center

Saying that, once you fix the hiding sidebar, I'll be able to remove some of my styles and adapt [side]="'right"

itay pro commented 4 years ago

Actually, after [side]="'right" everything seems to work perfectly Thanks

Arkadiusz Idzikowski staff commented 4 years ago

Glad it works. There still may be a problem where sidenav close automatically on viewport height change, but it will be fixed in the next update.

itay pro commented 4 years ago

It happen to me at the beginning but now it stopped

rjy_rmtech free commented 4 years ago

I also have the issue where the sidenav closes on viewport height change, when can I expect a fix for this issue?

Arkadiusz Idzikowski staff commented 4 years ago

Version 8.8.2 with the fix is already available.

itay pro answered 4 years ago

Any updates ?........

Arkadiusz Idzikowski staff commented 4 years ago

We are still working on this issue.

Arkadiusz Idzikowski staff commented 4 years ago

Could you provide more details about this height change that cause the sidenav to move towards the center of the screen? How exactly can we reproduce that?

We have made many tests in which we change the height of the window. In every case sidenav was hidden (which is not expected behavior as well), but it wasn't moving toward the center.

Do you use [side]="'right" input for the RTL version or did you add some custom styles? Is your sidenav in fixed or non-fixed mode?

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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No