Material: 100% height on body element causing issues

[jasedwards]

I am using bootstrap and I have set one of my row elements to be 500 px. I have content above and below this as well. when the page renders I get the top half gray (my body background-color) and the bottom white. I went in to dev tools to take a look and the issue is that the body is not resizing. when I get rid of height:100% that is set on body element in angular-material.css then the issue is fixed.

[adamduren]

I am experiencing this issue as well. @jasedwards Any update on this issue?

[adamduren]

What is the intention of setting height: 100%; in angular-material.css?

I was about to work around the issue with html, body { min-height: 100%; } in my own css file.

[jasedwards]

I fixed it by adding this to my css body {min-height:100%; height:auto;}

[ggranum]

The 100% height on the body element is also the cause of the address bar failing to hide on scroll on (at least) Android+Chrome.

edit: Confirmed same behaviour on iOS+Chrome and iOS+Safari.

[rschmukler]

The intention is to keep the body height fixed so that an inner md-content is what scrolls. This makes it so that things like sticky work correctly. It is worth exploring whether we can do something better...

[ggranum]

@rschmukler Thanks. Unfortunately I'm sure that you've realized by now (perhaps accompanied by a bit of sinking feeling) that even if there isn't something better overall we still won't be able to use 100% height on body. Here's my reasoning:

• The failure to hide the address bar on mobile is a complete non-starter for real world use.
• Even if mobile browsers are updated to 'fix' the address bar issue it won't help those older mobile devices that have the most restricted screen real estate. Also, that's a years-long adoption cycle.
• The longer this issue is set aside, the more internal development is made assuming a static height on body: so, more bugs and more pain later. Unless we're _really_ lucky and there is a simple universal hack.

I hope that the team chooses to rip off this bandaid as soon as possible. The number and variety of fixes that are likely to be introduced to fix this in the wild are likely to lead to more developer pain the longer the current behaviour is maintained. It will also lend to more bugs filed later as consuming devs and teams 'forget' which of their styles only exist to work around this issue.

Thanks again - and of course, thanks for _all_ the hard work.

[sp90]

Okay guys the best solution that i found to this issue was following:

html, body {
    position: fixed;
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    height: 100%;
}

This actually solves all issues iv'd run into on safari and chrome on mobile devices

Give it a try and give some feedback on the solution - if it works for you i will open a pull request for it

[robertmesserle]

The team agrees that this is a major issue; however, these changes will impact a number of components and will require very thorough testing.

[mateeyow]

:+1:

[galenbrazell]

What @ggranum has mentioned mirrors my opinion as well. This really affects designs with long scrolling content on old devices and new. Many users are already used to the address bar hiding itself on down scroll, without it a claustrophobic-feeling UX can occur.

A possible work around involves, removing the 100% height, setting md-sidenav and md-toolbar to fixed position and affixing a helper class with breakpoints to nudge the content that now flows beneath these. This nullifies the use of md-content completely though, and breaks full height md-sidenav as you now rely on content to stretch page height.

Looking forward to how this will be addressed, and thanks again for all the work.

[naomiblack]

@robertmesserle can you please have a close look at this and decide whether we should 1) do this before 1.0 or 2) defer because it's out of scope/too complex to do before 1.0.

I'd prefer to do it pre-1.0 if possible because of the impact on many components. Could you investigate?

[alfirin]

Hey guys,

First of all thanks for all your hard work.
We are using angular-material in my company and this issue is a major issue (usually it's the body which is scrollable in major websites).

Could we have more information about this issue (when t will be corrected) ?

Thanks a lot.

[mackelito]

+1.. we are also facing issues with 100% on body

[alfirin]

+1 for us. Please keep us updated about this.

[Ore4444]

It's a critical bug that's been open for a year. What's up with that??

[baelter]

This one is biting us in the ass constantly. Have anyone found a solid work around?

[mallowigi]

Just put up "body { height: auto !important }" ?

[baelter]

That gives weird scroll jumps when opening menus etc.

[harryPL]

+1, any news about this?

[ThomasBurleson]

Currently, we have

html, body {
  min-height : 100%;
}

For dialogs, menus, autocomplete, sidenav, etc. we use a backdrop (sometimes invisible) and expect leverage the body height. Does min-height still interfere with your needs ?

[ggranum]

@ThomasBurleson Start a new project using any three random 'getting started' type guides. Does the address bar hide when you scroll down on a mobile device? I seriously doubt it. Thus the answer is going to be 'yes, this should be a block-ship'.

Angular Material should never have gone to RC with this bug. It is incredibly likely that you won't be able to fix this issue correctly until the next major point release. And that is unbelievably sad.

[ThomasBurleson]

@ggranum - thx for the feedback. I will escalate a discussion with the team today.

[ThomasBurleson]

Getting Started and Layout documentation improvements are coming with PR https://github.com/angular/material/pull/6082

[ThomasBurleson]

Closed with SHA f6e97a02a9c88b1695094a8a85a11958924e4c61