1

I am new to angular and flex layout. My Page is pretty simple. Header with side navbar and router outlet.

I ran into the issue that my Page always shows a scrollbar.

If I remove fxFlexFill, scrollbar not showing. How can I fix this?

Here is stackblitz demo Stackblitz

Here is my template:

.fill-space {
  flex: 1 1 auto;
}

.content {
  flex: 1 1 auto;
  padding: 15px;
  position: relative;
  overflow-y: auto;
}

.footer {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
}
<div style="height: 100vh;">
  <mat-toolbar color="primary" class="fixed-header">
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <mat-icon>menu</mat-icon>
      </button>
      <span><button mat-button routerLink="/home"><h3>HOSPITALITY</h3></button></span>
      <span class="fill-space"></span>
      <div fxShow="true" fxHide.lt-md="true">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill>
    <mat-sidenav #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      
      <div fxLayout="column">
        <button mat-button routerLink="/home">HOME</button>
        <button mat-button routerLink="/account">MY ACCOUNT</button>
        <button mat-button routerLink="/login">LOGOUT</button>

        <a href="#" routerLink="/cart" mat-button>
          <mat-icon>shopping_cart</mat-icon>
          0
        </a>
      <a (click)="sidenav.toggle()" mat-list-item>
        <mat-icon>close</mat-icon> Close
      </a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content >
      <div class="content">
        <router-outlet></router-outlet>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>

</div>

1 Answer 1

4

The main issue is that the side nav gets a height of 100vh via the fxFlexFill directive.

You need to take into account the height of mat-toolbar-row, for example, by CSS calc (there are other ways to achieve his effect, depends on how you struct page layout)

Additionally, the body has an 8px margin, from the browser default style.

Here is a fork of Stackblitz

8
  • margin:0 didn't help. Do I need to npm install normalize.css and how can it help resolve my issue.
    – Chatra
    Commented Mar 9, 2019 at 21:47
  • each browser comes with its own base styling. margin:0 solves the issue at the question code snippet, by removing the default 8px margin. maybe there are other global styles that take effect at your project.
    – Guy Yogev
    Commented Mar 9, 2019 at 22:21
  • The only other styles I am using is prebuilt-themes in angular material. Other than that there are no other styles
    – Chatra
    Commented Mar 9, 2019 at 22:27
  • Can you create a demo with all styles in place?
    – Guy Yogev
    Commented Mar 9, 2019 at 22:32
  • Here is the stackblitz example stackblitz.com/edit/angular-mbp7rq
    – Chatra
    Commented Mar 10, 2019 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.