Components: Issue : Angular Material 2 - not rendering in full screen

[happyvig]

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

[jelbourn]

I don't know what you mean by "full screen". Are you perhaps referring to the 8px margin that browsers add by default to the document body?

[aquinum6]

I think he meant by full and half screen that height of app is not 100% and footer is not on the bottom.
You need to get container to proper size if app content is not filling >= 100% of view. This is not a bug.

[happyvig]

@aquinum6 : The height of the container is 100% already, set by default. I feel, its not needed to set to it manually.
Any other suggestions to fix the issue ?

[benelliott]

Can you share your CSS? Can you reproduce the issue in a plunker? What happens when you set the height of your <app> and <dashboard> elements to 100%?

[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?

[muguliebe]

@kara i think the real problem is.. when using fullscreen attribute and footer put inside 'md-sidenav-layout', then footer is not a sticky bottom even though using absolute position and bottom zero.

[jelbourn]

@mmalerba need discussion on the behavior of md-sidenav-layout WRT taking up the whole screen

[mmalerba]

I would avoid the fullscreen attribute, we plan to remove it. Instead structure the DOM so that md-sidenav-layout naturally takes up the full screen (see example in #1966)

[fuqiang-CN]

set app tag {display:block;}

[sukhveersingh]

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

}

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}