CODEWITHSUNDEEP
htmlangularangular-material2
TDC
TDC

Reputation: 1929

Angular Full Screen Layout With Toolbar

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.

Upvotes: 2

Views: 5857

Answers (1)

Tomnar
Tomnar

Reputation: 357

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>

Upvotes: 5

Related Questions