Fixed Angular Sidenav slides in &amp; out on viewport re

Topic: Fixed Angular Sidenav slides in & out on viewport resize

exist-ui pro asked 6 years ago

Hi! I'm having issues with the angular sidenav, it appears & disappears alternatively when you resize the browser in random or specific viewport sizes even if it's set to fixed.

Add comment

Edyta Dabrowska free answered 6 years ago

1 0 Best answer

Hi guys,
on your request, I tried to fix fixed sidebar logic. Still, it will be in the package normally in the next release, but here you go:

Path: <code>typescripts/pro/sidenav/sidenav.component.ts</code>
Change similar code bloke to:
<code>@HostListener('window:resize')
windwosResize() {
this.windwosWidth = window.innerWidth;
if (this.fixed) {
if (this.windwosWidth < 1441) { this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)'); this.setShown(false); } if (this.windwosWidth > 1440 && this.shown) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
this.hideOverlay();
this.setShown(true);
} else if (this.windwosWidth > 1440) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
this.hideOverlay();
this.setShown(true);
}
} else {
if (this.windwosWidth > 1440) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
this.hideOverlay();
this.setShown(false);
}
}
};</code>

Let me know how this works.

Please insert min. 20 characters.

Hi guys, on your request, I tried to fix fixed sidebar logic. Still, it will be in the package normally in the next release, but here you go: Path: typescripts/pro/sidenav/sidenav.component.ts Change similar code bloke to:

@HostListener('window:resize')
windwosResize() {
this.windwosWidth = window.innerWidth;
if (this.fixed) {
if (this.windwosWidth < 1441) { this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)'); this.setShown(false); } if (this.windwosWidth > 1440 && this.shown) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
this.hideOverlay();
this.setShown(true);
} else if (this.windwosWidth > 1440) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
this.hideOverlay();
this.setShown(true);
}
} else {
if (this.windwosWidth > 1440) {
this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
this.hideOverlay();
this.setShown(false);
}
}
};

Let me know how this works.

indijosh free commented 6 years ago

This did it! Thank you so much, Edyta!

Add comment

Oscar Bejarano pro answered 6 years ago

0 0 Best answer

hi, this code works fine but, it need another line:

if (this.windwosWidth < 1441 ) { 
 this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform', 'translateX(-100%)'); 
 this.setShown(false);
 this.hideOverlay(); //this line
 }

//if you dont put this line, when you open the sidenav and resize the browser the overlay effect don't disappear, regards

Add comment

indijosh free answered 6 years ago

0 0 Best answer

I still seem to be having a problem with this.

Here's my code so far:

<body class="fixed-sn">

<mdb-sidenav #sidenav class="fixed side-nav" [fixed]="true">

And the sidenav is still appearing and disappearing. Do we have to update MDB for this to work? I'm on v4.3.1

Er Ka free commented 6 years ago

I have updated to the latest, still having the same problem.

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

Please add .fixed-sn class to the body and .side-nav class to the mdb-sidenav tag. Let me know it this helps.

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

Hi, thank you for noticing this. We will try to fix it in the future.

indijosh free commented 6 years ago

So how do we fix this in the meantime?

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

exist-ui

Pro User 7Support score
6Questions 0Answers 0Snippets