Topic: Sidenav toggles on window vertical resize
Expected behaviour
Side nav to show on a 15" retina screen as default using default OS display settings OR to not hide on vertical resize when [sidenavBreakpoint]="994" is used and for it to not slide into view when used with fixed=true + sidenavBreakpoint
Actual behaviour
No sidenav unless I zoom out to 90%.
Setting <mdb-side-nav #sidenav class="fixed" [fixed]="true" [sidenavBreakpoint]="994" >
results in a sidenav showing, it slides into view on render(ugly) but it disappears on vertical resize (OS topbar or inspector triggers this, some times normal page use)
Resources (screenshots, code snippets etc.)
This website and my app have the issue, so ill document this site.
Using the default OS and browser settings on a MacBook pro 15" (1440x900 I think~)
Zooming out 90% as a user (chrome zoom option) 
OS Display settings (I clicked the scaled option to show the settings, it was the default for display, which is the same settings but doesn't show the extra data)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: 15\" Macbook Pro
- Browser: Chrome
- OS: MacOS
- Provided sample code: Yes
- Provided link: No
Snider free commented 4 years ago
Side @staff: im actually a pro user, I got the pro + admin bundle can you adjust my profile? :)
Arkadiusz Idzikowski staff commented 4 years ago
The first screenshot is a view after page load without any additional windows on the side and with screen resolutions > breakpoint?
We will add 'pro' status to your profile.
Snider free commented 4 years ago
Hi, Yes that was taken on chrome after page load, chrome maximised and no other apps clipped to any edge.
screen res should "look like 1440x600", I will add a 3rd screenshot to my post for OS display settings. (I'm hoping vertical resize and this showing is the same issue :D if not we have two issues here btw)
Arkadiusz Idzikowski staff commented 4 years ago
It may work like that on the MDB website, because the breakpoint is set to 1440px, but it should work correctly in Angular application if you use these settings:
<mdb-side-nav #sidenav class="fixed" [fixed]="true" [sidenavBreakpoint]="994" >.If the sidenav is not displayed correctly in your Angular app as well, please prepare a simple demo and send it to a.idzikowski@mdbootstrap.com, because we can't reproduce that on our end.
Snider free commented 4 years ago
Ok, I see the problem now I know 1440px was intentional, the variable
$sidenav-breakpointis wrong you're targeting the wrong device.According to the material documentation and looking at your media selection your 1px off, altering the sidenavBreakpoint to 1439 variable confirms my finding.
you use the media query:
$hide-sidenav: 'only screen and (max-width : #{$sidenav-breakpoint})' !default;with
$sidenav-breakpoint: 1440px !default;being used by whereas per material documentation the breakpoint your targeting is 1280 β 1439 so it should be$sidenav-breakpoint: 1439px !default;source: https://material.io/design/layout/responsive-layout-grid.html#breakpoints
Arkadiusz Idzikowski staff commented 4 years ago
Thank you, we will take a closer look at that. Does setting breakpoint to 1439 resolves the problem for now (I'm asking about Angular app)?
Snider free commented 4 years ago
Hi, well, no it does not, because of a bug it exposes but in theory yes the nav shows when setting to 1439, however, I cant go live with it because if the window vertical resizes (inspector or the macOS float-in menu) the side nav toggles away leaving a side nav sized gap (ss #4)
Interesting to note is this website has the side nav bug, even though the side nav is hidden for me. on macOS (1440x900) the inspector or the top float in menu triggers the "hide" sequence using... I mean to be exact "The menu seams to display:block and then sides away back into a display:none" it happens quickly, once and wont again until after a full page refresh.