mat-sidenav overlaps mat-sidenav-content

[CharlesIrvineKC]

My mat-sidenav overlaps my content. This behavior only started recently after making some code changes.

If I resize the browser window the overlap goes away.

I am currently not able to reproduce the problem with a simple StackBlitz example.

There are no errors showing in the dev tools console. Currently, I am stumped regarding how I diagnose this. Any help would be greatly appreciated. Thanks

Versions:
Angular: 7.3.3
MacOS: 10.14.3
Typescript: 3.2.4
Chrome: 72.0.3626.109

[wnvko]

To change the sidenav behavior you can set sidenav's mode. In your first picture it seems like mode is set to over. In second image it seems like it is set to side. Check in your application if you are changing the mode dynamically, e.g. on window.resize.

[CharlesIrvineKC]

Thanks for the input, but actually I do have mode set to side. Here's my template:

<mat-sidenav-container class="course-view">
  <mat-sidenav class="topic-tree" mode="side" opened>
    <app-topic-tree></app-topic-tree>
</mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

The first screen shot above is what I get when the page first displays. The second screen shot shows the result of barely resizing he browser window after the page is first rendered. Somehow doing that corrects things.

[wnvko]

Can you test with this application sidenav.zip
unzipit, then npm install it and start it

[CharlesIrvineKC]

Your app worked fine. Mine was also working fine for quite a while and then something changed and I started to have the overlapping behavior. One significant thing that changed is I started displaying a PrimeNG based component into the router-outlet of the sidebar content area. The problem started occurring about that time so that might be the cause. I am somewhat doubtful of this since I didn't notice the overlapping behavior immediately after bringing in PrimeNG. I could have been there and I just didn't notice. I have now converted both of my NgMd sidnav based components to PrimeNG and my problem is now bypassed. So, I will close this issue. Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}