0

See the following StackBlitz for the app in question: https://stackblitz.com/edit/angular-7cazwh?file=src%2Fapp%2Fapp.component.html

<div class="main-div">
  
  <mat-toolbar color="primary" class="app-header">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>Config</span>
    <span class="spacer"></span>
    <button mat-icon-button>
      <mat-icon>account_circle</mat-icon>
    </button>
    <span>Admin</span>
  </mat-toolbar>

  <mat-drawer-container class="app-sidenav">
    <mat-drawer #sidenav mode="side" opened="true" class="sidenav" fixedInViewport="false">
      <mat-list>
        <mat-list-item>
          <mat-icon matListIcon>people</mat-icon>Users
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>devices_other</mat-icon>Devices
        </mat-list-item>
      </mat-list>
    </mat-drawer>
    <mat-drawer-content>
      <p style="margin:20px">TODO: mat-sidenav-content</p>
    </mat-drawer-content>
  </mat-drawer-container>

</div>

.spacer {
  flex: 1 1 auto;
}

.main-div {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

.app-header {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.app-sidenav {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

Currently when the page overflows I end up with the scrollbar on the right side, that spans both the header area (where mat-toolbar is placed) and the content area (where mat-sidenav-content is placed). As shown below:

enter image description here

What I want instead, is the scrollbar to be only shown in the content area as demonstrated below. I want the header and the left side menu to stay pinned (not move while the user is scrolling up and down within the overflowing content):

enter image description here

Eternal21
  • 4,190
  • 2
  • 48
  • 63

1 Answers1

1

This scroll is being applied to your body element. You may want to simply reset the margin and padding for the html and body elements:

body, html {
  padding: 0;
  margin: 0;
}

https://stackblitz.com/edit/angular-eddznu?file=src%2Fstyles.css

robbieAreBest
  • 1,601
  • 14
  • 16
  • 1
    You're a genius. Thanks a lot, I spent hours trying to figure this out. – Eternal21 Jun 03 '21 at 20:50
  • Sadly this seems to only work within StackBlitz, and not when running in an actual Chrome browser. – Eternal21 Jun 04 '21 at 04:20
  • @Eternal21 where did you add this rule in your project? It should be in the top-level stylesheet. You might want to also look into including a "reset" stylesheet. Something like this: https://meyerweb.com/eric/tools/css/reset/ – robbieAreBest Jun 04 '21 at 11:55
  • I added it right in the root styles.scss inside the src folder. – Eternal21 Jun 04 '21 at 14:25
  • @Eternal21 ok, that's good. Do you still have any padding or margin around your toolbar and the edge of the browser? If so there may be some other styling at play that is causing you issues. – robbieAreBest Jun 04 '21 at 15:15
  • No there's no padding there. I guess StackBlitz behaves differently from native chrome. – Eternal21 Jun 04 '21 at 18:33