Fixed Angular Sidenav slides in & out on viewport resize

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

exist-ui pro asked 7 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 answered 7 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: 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 commented 7 years ago

This did it! Thank you so much, Edyta!

Add comment

Edyta Dabrowska answered 7 years ago

0 0 Best answer

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

indijosh commented 7 years ago

So how do we fix this in the meantime?

Add comment

Edyta Dabrowska answered 7 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

indijosh answered 7 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 commented 7 years ago

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

Add comment

Oscar Bejarano pro answered 7 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

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

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

About author

exist-ui

Pro User

7Support score
6Questions 0Answers

0Snippets likes 0Snippets