Scrolling header on mobile

[ahoereth]

Combining <Layout fixedHeader> with <Header scroll> results in the header

• being visible on desktop and mobile,
• scrolling with the content on big screens and
• being fixed/not scrolling on small screens.

Example: http://codepen.io/anon/pen/ALBZBx

I think that is kind of un-intuitiv and also undocumented behavior. Expected behavior for me would be to have it scrolling on desktop & mobile.

Interested in changing this behavior or introducing a new attribute which would allow this?

Regards, Alex

[ahoereth]

Very similar problem for the <Footer /> component:

• Fixed footer when placed inside <Layout /> after <Content />. Always sticky to the bottom of the screen, no matter the height of <Content />'s value -- but this way it always takes up a lot of screen real estate.
• Does not take up screen real estate when placed last inside of <Content /> -- but this way it is not fixed to the bottom of the screen when the content does not fill the full available vertical space.

[tleunen]

Thanks @ahoereth.

For the header, I've tried the example with the basic MDL lib and I can reproduce the exact same issue. See: https://codepen.io/anon/pen/JRYxWx Therefore I'd suggest you to file an issue on the MDL repo to make sure they fix the issue in their v2. https://github.com/google/material-design-lite

About the footer, I don't know yet what are the plans for v2, but in v1, the footer has to be inside the "content", not outside.

[ahoereth]

Thanks thus far. Regarding the footer inside content: When its inside its not sticky to the bottom of the screen. Demo: https://codepen.io/anon/pen/KgdjpB

[tleunen]

I don't think the MDL team made something to make it sticky, but I might be wrong