Angular Full Screen Layout With Toolbar

Question

Angular 4.4.4 Angular Material 2.0.0-beta.12

I am trying to achieve a desktop layout where there is an Angular Material Toolbar at the top of the screen and the router-outlet content below filling the remaining screen height. I want the router-outlet content to fill the screen height so that I can set any child/grandchild components to have a height of 100% until such point that I want to provide a scrollbar.

I have gone back to basics to try and just get a div with a border to fill the space remaining below the Toolbar but I can't even get that to work. It looks as if the component replacing the router-outlet is the height of the full screen not taking into account the Toolbar above it.

My app.component is as follows:

<div id="app-component" style="height: 100%; border: 1px solid red;">

    <!-- Application Toolbar -->
    <mat-toolbar id="mat-toolbar" color="primary" style="margin: 0; padding: 0;">

        <span style="padding-right: 16px;">Indigo</span>

        <nav id="tabNavBar" #tabNavBar mat-tab-nav-bar>
            <a mat-tab-link *ngFor="let tabNavLink of tabNavLinks"
               [routerLink]="[tabNavLink.path]"
               routerLinkActive
               #rla="routerLinkActive"
               [routerLinkActiveOptions]="{exact: true}"
               [active]="rla.isActive"
               (click)="onClickTab(tabNavLink)"
               style="height: 64px;">
                {{ tabNavLink.label }}
            </a>
        </nav>

    </mat-toolbar>

    <!-- Application Module Content -->
    <router-outlet></router-outlet>

</div>

and the component targeted by the router-outlet is as follows:

<div style="width: 100%; height: 100%; margin: 0; padding: 0; border: 1px solid #4cff00;"></div>

The app.component fits perfectly. The child component sits immediately below the Toolbar but extends below the bottom of the window by the height of the toolbar causing a scrollbar to appear.

I have tried untold different approaches to this but would appreciate some advice on this frustratingly simple layout.

Been trying to do this with Angular 5 and the latest material as well with no luck. Only works if I put in my own header above the fullscreen sidenav, and don't use the toolbar — mtpultz
– mtpultz, Commented Jun 20, 2018 at 15:30

Tomnar · Accepted Answer · 2018-06-24 08:27:05Z

5

I have used display flex to achieve this. I have created a very basic example here: https://stackblitz.com/edit/angular-n3s1ul

The idea is to use flex to align the header and the content, while the content has overflow:auto to show scrollbars if necessary. See the code below to get an overview, the full code is available at the link.

CSS

my-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

mat-sidenav-container.mat-drawer-container {
  overflow: auto;
  flex-grow: 1;
}

HTML

<mat-toolbar color='primary'>
  <h1 routerLink="/">Hello World</h1>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

answered Jun 24, 2018 at 8:27

Tomnar

3572 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Full Screen Layout With Toolbar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related