Topic: Sidenav moves towards screen center
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.)
Any updates ?........
Arkadiusz Idzikowski staff commented 5 years ago
We are still working on this issue.
Arkadiusz Idzikowski staff commented 5 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?
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 5 years ago
Actually, after [side]="'right" everything seems to work perfectly
Thanks
Arkadiusz Idzikowski staff commented 5 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 5 years ago
It happen to me at the beginning but now it stopped
rjy_rmtech commented 5 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 5 years ago
Version 8.8.2 with the fix is already available.
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
Ping............
Arkadiusz Idzikowski staff commented 4 years ago
We are still working on the issues with the side nav and viewport width/height.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
Arkadiusz Idzikowski staff commented 5 years ago
Thanks, we will take a closer look at that.