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]

👍

[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 #6082

[ThomasBurleson]

Closed with SHA f6e97a0

[Araknos]

Is this supposed to be resolved ? I still have the issue using Angular 9.

[Splaktar]

@Araknos Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.