Issue : Angular Material 2 - not rendering in full screen

Bug, feature request, or proposal:

Bug :

I am using Angular Material 2 for my Angular 2 app. My dashboard page is not rendering full page in the browser. Attached is the screenshot of the above mentioned issue.

app.component.html

<router-outlet></router-outlet>

dashboard.component.html

<md-sidenav-layout>
  <md-sidenav #sidenav mode="side" class="app-sidenav md-sidenav-over" (open)="list.focus()">
    <ul #list>
      <li> Item 1</li>
      <li> Item 2</li>
      <li> Item 3</li>
    </ul>
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>
    <span class="margin-left10"> Angular Material2 Portal </span>
    <span class="app-toolbar-filler"></span>
    <button md-button router-active [routerLink]=" ['Index']">
      Index
    </button>
    <button md-button router-active [routerLink]=" ['Home']">
      {{ 'HOME.TITLE' | translate }}
    </button>
    <button md-button router-active [routerLink]=" ['About'] ">
      {{ 'ABOUT.TITLE' | translate }}
    </button>
  </md-toolbar>

  <div class="app-content">
    <md-card>
      Dashboard Content Goes Here..!!
    </md-card>
  </div>

  <footer>
    <span id="footerText">Dashboard Footer</span>
  </footer>
</md-sidenav-layout>

dashboard.component.ts

import {Component, Inject, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';

console.log('`Dashboard` component loaded asynchronously');

@Component({
  selector: 'dashboard',
  styles: [
    require('./dashboard.component.css')
  ],
  template: require('./dashboard.component.html'),
  pipes: [TranslatePipe]
})
export class Dashboard implements {
  elementRef:ElementRef;

  constructor(@Inject(ElementRef) elementRef:ElementRef) {
    this.elementRef = elementRef;
  }

  ngOnInit() {   
    console.log('hello `Dashboard` component');   
  }

}

Am I missing something here ?

Appreciate your help on this.

What is the expected behavior?

Full screen rendering

What is the current behavior?

Half screen rendering

Which versions of Angular, Material, OS, browsers are affected?

Chrome 51.0.2704.103 m (64-bit) Node 6.x Angular 2.0.0-rc.1 Angular Material 2 - 2.0.0-alpha.5

[sukhveersingh]

.example-container { position: absolute; min-height: 100% !important;

}

add this class to md-sidenav-container will resolve the issue

[kara]

@happyvig It looks like you’re not using the fullscreen attribute. The sidenav layout isn’t fullscreen by default - you have to add it. Can you try it and report back?