md-sidenav: fullscreen doesn't respect md-content

[Mario-Eis]

Bug, feature request, or proposal:

Possibly a bug

What is the expected behavior?

Given is

<md-sidenav-layout fullscreen>
...
</md-sidenav-layout>

In DOM the content is wrapped in md-content. I would expect md-content to be fullscreen as md-sidenav-layout, md-sidenav and the backdrop are.

What is the current behavior?

md-sidenav uses the full hight because of

    position: fixed;
    top: 0;
    bottom: 0;

md-content only respects the width

    margin-left: 0px;
    margin-right: 0px;

What are the steps to reproduce?

http://plnkr.co/edit/NjimGzKqXw6bKJjk8Pyg?p=preview

What is the use-case or motivation for changing an existing behavior?

To have control over the vertical overflow in the sidenav content.
To realize scrollable content that consumes the full height.

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

alpha.5

Is there anything else we should know?

This is possibly a duplicate of (or at least related to) #487
I created a new issue as the use-case and targeted feature (fullscreen attribute vs. styling the height) are different. Although i think the solution could look quiet the same.
I also only found some very "hacky" ways to get the md-content becoming fullscreen. Like !important on:host md-content to ignore proper view encapsulation or using global css (also ignoring view encapsulation).

[uzumakinaruto123]

+1

adding height:100% to md-content works. but it scrolls sidemenu along with the page. Adding position:fixed and overflow:hidden to fullscreen solves that. and overflow-y: scroll; height: 100%;
to md-content

what am trying to do is no matter what the main content's height is , sidemenu along with toolbar should always be fixed with 100% height.

[SvenBudak]

Old and Closed, but for everyone who is still looking for a solution, here is mine:

My MediaQuerie Mixins

// MEDIA QUERIE MIXIN
//////////////////////////////////////////
@mixin mediaMin($var) {
  @media only screen and (min-width: $var) {
    @content;
  }
}

@mixin mediaMinAndOrientation($var, $orientation) {
  @media only screen and (min-width: $var) and (orientation: $orientation) {
    @content;
  }
}

@mixin mediaMax($var) {
  @media only screen and (max-width: $var - 1px) {
    @content;
  }
}

@mixin mediaMaxAndOrientation($var, $orientation) {
  @media only screen and (max-width: $var - 1px) and (orientation: $orientation) {
    @content;
  }
}

@mixin mediaFromTo($var1, $var2) {
  @media only screen and (min-width: $var1) and (max-width: $var2 - 1px) {
    @content;
  }
}

@mixin mediaOrientation($orientation) {
  @media only screen and (orientation: $orientation) {
    @content;
  }
}

The Styles for the Sidenav Container

$mat-toolbar-height-desktop: 64px !default;
$mat-toolbar-height-mobile-portrait: 56px !default;
$mat-toolbar-height-mobile-landscape: 48px !default;

mat-sidenav-container {
  &.mat-drawer-container[fullscreen] {
    // Portrait (Default)
    @include mediaOrientation(portrait) {
      max-height: calc(100vh - #{$mat-toolbar-height-mobile-portrait});
      top: $mat-toolbar-height-mobile-portrait;
    }
    // Landscape
    @include mediaOrientation(landscape) {
      max-height: calc(100vh - #{$mat-toolbar-height-mobile-landscape});
      top: $mat-toolbar-height-mobile-landscape;
    }
    // 600px +
    @include mediaMin($resMobileLarge) {
      max-height: calc(100vh - #{$mat-toolbar-height-desktop});
      top: $mat-toolbar-height-desktop;
    }
  }
}

If you want, you can install my little mixin-lib direct from GitHub via npm and include the lib direct in your SCSS file with: @import "~@devmonkeys/scss-elements/style";

My code works ofc only if you use the fullscreen directive in your

[angular-automatic-lock-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.}