Sidenav moves towards screen center

web
mobile

Topic: Sidenav moves towards screen center

itay pro asked 2 months 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 2 months ago

Thanks, we will take a closer look at that.


itay pro answered 2 months ago

Any updates ?........


Arkadiusz Idzikowski staff commented 2 months ago

We are still working on this issue.


Arkadiusz Idzikowski staff commented 1 months 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?


itay pro answered 1 months 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 1 months ago

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


Arkadiusz Idzikowski staff commented 1 months 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 1 months ago

It happen to me at the beginning but now it stopped


rjy_rmtech pro premium commented 1 months 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 1 months ago

Version 8.8.2 with the fix is already available.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.8.1
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags