Incorrect display in mat-sidenav-content

#1 · August 7, 2018, 1:33 pm

Hi,

After logging in, the application will appear as shown in the attachment. Only after a hide and show again everything is displayed to me correctly. Unfortunately, I have not found the cause so far. Can someone give me a hint here.

regards Ingo

#2 · August 13, 2018, 9:02 am

Me too faced same problem. I did below to fix.

Edit : app.component.ts

Add below two declarations :

@ViewChild('mainNav') sideNav: MatSidenav;

isAppStartup: boolean = true;

And Edit ngOnInit() as below

this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
let url = (<NavigationStart>event).url;

if (url !== url.toLowerCase()) {
this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
}

// to fix side nav overlap
if (this.isUserLoggedIn && this.isAppStartup && this.sideNav) {
this.sideNav.toggle();
}

if (this.adminExpander && url.indexOf('admin') > 0) {
this.adminExpander.open();
}

// to fix side nav overlap
if (this.isUserLoggedIn && this.isAppStartup && this.sideNav) {
this.sideNav.toggle();
this.isAppStartup = false;
}
}

Hope this helps you..

Ingo has reacted to this post.

#3 · August 13, 2018, 10:14 am

Hi KanKathir,
Thank you for your help. Now the site works fine.

Regards Ingo

IMPORTANT!

This forum is now archived. Click here for the New Support Forum