Issue : Angular Material 2 - not rendering in full screen

happyvig commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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

mmalerba commented 7 years ago

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)