Allow to manage overflow within md-sidenav-layout

[cortopy]

• Do you want to request a feature or report a bug?

feature

• What is the current behavior?

The following won't work if the layout of the whole application is to take 100% of the height

md-sidenav-layout
  height: 100%

  md-content
    height: inherit

If there is a Component too large within md-content, the whole page will scroll, including the sidebar if it's open and any top toolbars. In this instance, changing the css of the sidenav component to:

  :host > md-content {
    position: relative;
    height: inherit
    -webkit-transform: translate3D(0, 0, 0);
            transform: translate3D(0, 0, 0);
    display: block; }

allows adjusting the overflow of children components within the main area using percentages. Percentages will not work unless the height of md-content is set. The advantage of this approach is that sidenav can stay open and won't scroll. Top toolbars don't scroll either.

• What is the expected behavior?

Being able to style md-content to manage heights and widths of components within it.
Adding a height: inherit for md-contentfixes the issue, but I'm not sure hard coding this would be the best solution.

• What is the motivation / use case for changing the behavior?

Taking control of how scrolling affects each part of the whole layout. Currently it's an all or nothing approach

• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?

Material2: 2.0.0-alpha.4
Angular: rc01

[hansl]

I'm not sure I follow. For me setting the height to inherit does nothing (and it's already inherited). Could you give an example on plunkr or a screenshot please?

[ollwenjones]

👍 I'm running into a related problem. since the md-sidenav-layout ng-contents things into an md-content wrapper that I can't seem to target to set height, I'm not able to get app wrapper to consume the viewport. I could be overlooking some obvious CSS selector mistake, but I've burned some real time here on something that should be trivial.

[ollwenjones]

Also @hansl the md-content height seems to be initlal not inherit by default. (at least in Chrome.)

[ollwenjones]

Reason I was spinning my wheels: failure to understand some shadow DOM things related to the component and CSS scope and tag selectors. Still agree with @cortopy's assessment.

[cortopy]

I was just testing this issue with the alpha.5 release and my css seems to be taken into account now:

md-sidenav-layout
  height: 100%

  md-content
    height: inherit

At least now I feel like I can style md-content
However, after reading I'm not the only one asking about inherit properties, perhaps it wouldn't be a bad idea to have inherit as default for height though. I can't see any major side-effects

[hansl]

After discussing this with @robertmesserle it seems like the CSS in master would already fix this. In addition, you seem to say this is fixed as of alpha.5.

I'm closing this for now, but if you think there's more work needed feel free to file a new issue or comment here.

Cheers!

[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.}