Material: md-content: Search bar doesn't collapse on mobile

Created on 17 Mar 2015  路  13Comments  路  Source: angular/material

Normally if you scroll down on a phone the search bar will collapse. However it seems this doesn't work when you md-content. I've noticed this both in my own app and on the docs. This waists a lot of screen space and isn't behavior people have come to expect. I've tested this on android(4.4.4). I'm pretty sure it's the same on ios but I'll have to check.

minor demo bug mobile responsive
Source
picture epelc

All 13 comments

Yes, it's the same on ios (chrome).

remicastaing picture remicastaing on 4 Apr 2015

Layouts responding to scrolls, gestures will be addressed in post v1.0 releases.

ThomasBurleson picture ThomasBurleson on 4 Sep 2015

@ThomasBurleson This isn't about the layout, it's about the browser's built-in search bar. To my knowledge, there's no way to fix this with scrolling elements like <md-content>. They expect the main scrolling element to be the body.

calebegg picture calebegg on 7 Sep 2015

@calebegg - I misunderstood. So what is the iOS API used to programmatically close/shrink the Search bar?

Perhaps something like:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Resources:

ThomasBurleson picture ThomasBurleson on 7 Sep 2015

That's used to completely hide the address bar when the site is installed as a home screen shortcut. This bug refers to the behavior where it's collapsed when scrolling down. (It also impacts Android, I believe, not just iOS).

calebegg picture calebegg on 7 Sep 2015

It looks like this Stack Overflow question has some workarounds for iOS at least.

calebegg picture calebegg on 7 Sep 2015

md-content should be wrapped with layout row and have layout-align. Working example:

<div layout="row" layout-align="start start">
    <md-content>
       Some content
    </md-content>
</div>
mramanauskas picture mramanauskas on 17 Feb 2016
👍1

Method described by @mramanauskas works, thank you!
Additionally I had to add some CSS to circumvent side effects of this change:

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

md-bottom-sheet, md-toast {
    position: fixed;
}

md-content {
    width: 100%;
}
mmiszy picture mmiszy on 15 Apr 2016

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

ThomasBurleson picture ThomasBurleson on 28 Apr 2016

Is there another workaround for this? I'm not using md-content but my app still won't hide addressbar or footer on mobiles.

ospfranco picture ospfranco on 13 May 2016

It is caused by using containers with the Css overflow property. Check your use of 'overflow:auto;' or 'overflow:scroll'.

epelc picture epelc on 13 May 2016
👍1

The solution proposed by @mramanauskas will break md-scroll-shrink header, unfortunately :(

mugwag picture mugwag on 6 Oct 2017

<body style="height:auto; overflow:auto;">

this solved my issue.

saubansada picture saubansada on 23 Jun 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

robertmesserle picture robertmesserle  路  3Comments
reggiepangilinan picture reggiepangilinan  路  3Comments
WebTechnolog picture WebTechnolog  路  3Comments
kasajian picture kasajian  路  3Comments
LeoLozes picture LeoLozes  路  3Comments