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.

Edyta Dabrowska free answered 7 years ago


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 7 years ago

This did it! Thank you so much, Edyta!

Oscar Bejarano pro answered 7 years ago


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

indijosh free answered 7 years ago


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 7 years ago

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

Edyta Dabrowska free answered 7 years ago


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


Edyta Dabrowska free answered 7 years ago


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

indijosh free commented 7 years ago

So how do we fix this in the meantime?


Please insert min. 20 characters.

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
Tags