title: Angular Material 2 - Not rendering in full page
body: <p>I am using <a href="https://github.com/angular/material2" rel="nofollow">Angular Material 2</a> 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.</p>
  
  <p>AppComponent - Template file:</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>DashboardComponent - Template file :</p>
  
  <pre><code>&lt;md-sidenav-layout&gt;
    &lt;md-sidenav #sidenav mode="side" class="app-sidenav md-sidenav-over" (open)="list.focus()"&gt;
      &lt;ul #list&gt;
        &lt;li&gt; Item 1&lt;/li&gt;
        &lt;li&gt; Item 2&lt;/li&gt;
        &lt;li&gt; Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/md-sidenav&gt;
  
    &lt;md-toolbar color="primary"&gt;
      &lt;button class="app-icon-button" (click)="sidenav.toggle()"&gt;
        &lt;i class="material-icons app-toolbar-menu"&gt;menu&lt;/i&gt;
      &lt;/button&gt;
      &lt;span class="margin-left10"&gt; Angular Material2 Portal &lt;/span&gt;
      &lt;span class="app-toolbar-filler"&gt;&lt;/span&gt;
      &lt;button md-button router-active [routerLink]=" ['Index']"&gt;
        Index
      &lt;/button&gt;
      &lt;button md-button router-active [routerLink]=" ['Home']"&gt;
        {{ 'HOME.TITLE' | translate }}
      &lt;/button&gt;
      &lt;button md-button router-active [routerLink]=" ['About'] "&gt;
        {{ 'ABOUT.TITLE' | translate }}
      &lt;/button&gt;
    &lt;/md-toolbar&gt;
  
    &lt;div class="app-content"&gt;
      &lt;md-card&gt;
        Dashboard Content Goes Here..!!
      &lt;/md-card&gt;
    &lt;/div&gt;
  
    &lt;footer&gt;
      &lt;span id="footerText"&gt;Dashboard Footer&lt;/span&gt;
    &lt;/footer&gt;
  &lt;/md-sidenav-layout&gt;
  </code></pre>
  
  <p>DashboardComponent.ts:</p>
  
  <pre><code>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');   
    }
  
  }
  </code></pre>
  
  <p>Am I missing something here ?</p>
  
  <p>Please refer : 
  <a href="http://i.stack.imgur.com/B1sin.png" rel="nofollow">Screenshot of my half-page rendered dashboard page</a></p>
  
  <p>Appreciate your help. </p>