How can I make header scrollable for smaller screens in MDL?
Question
With MDL 1.0( http://www.getmdl.io/ ) I'm trying to make a header scrollable on bigger & smaller screens. But it is scrollable only on bigger screens(like on my pc), but not on smaller screens.
Here's the html:
<html> <head> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.teal-light_green.min.css" /> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <!-- Simple header with scrollable tabs. --> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header mdl-layout__header--scroll"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> </div> <!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a> <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a> <a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a> <a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a> <a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> </div> <main class="mdl-layout__content"> <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"> <div class="page-content"><br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!<br />New line!</div> </section> <section class="mdl-layout__tab-panel" id="scroll-tab-2"> <div class="page-content"><!-- Your content goes here --></div> </section> <section class="mdl-layout__tab-panel" id="scroll-tab-3"> <div class="page-content"><!-- Your content goes here --></div> </section> <section class="mdl-layout__tab-panel" id="scroll-tab-4"> <div class="page-content"><!-- Your content goes here --></div> </section> <section class="mdl-layout__tab-panel" id="scroll-tab-5"> <div class="page-content"><!-- Your content goes here --></div> </section> <section class="mdl-layout__tab-panel" id="scroll-tab-6"> <div class="page-content"><!-- Your content goes here --></div> </section> </main> </div> </body> </html>
As you see, the header is scrollable but only for bigger screens (like on PC). But if you make the window smaller, or just run it on a smaller screen, the header is fixed and not scrollable. Also if I remove the mdl-layout--fixed-header from the outer div (main div), the header disappears on smaller screens.
Any idea how to make header scrollable on both bigger and smaller screens?
4 answers
solution1
8 ACCPTED 2015-07-21 02:21:49
I had the same issue and I resolved it by adding "flex-shrink: 0;" to .mdl-layout__content
solution2
2 2015-08-01 04:19:10
I had the same problem working on an MDL Wordpress theme. I got the header to scroll with the rest of thepage on small screen sizes with by adding the following CSS:
@media screen and (max-width: 850px) {
.mdl-layout__container {
position: static;
}
}
Using this method allows the Chrome URL bar on mobiles to be pushed off screen when scrolling (which was my main goal).
I also kept the header visible at top of pages on small screens with this CSS:
@media screen and (max-width: 850px) {
.mdl-layout__header {
display: block;
}
}
solution3
1 2016-03-31 18:41:26
As a follow-up on Devleshes' post, replacing the height of mdl-layout__content with the following will prevent double scrollbars.
The following snippet does the trick for me:
.mdl-layout__content {
flex-shrink: 0;
}
.mdl-layout__drawer.is-visible~.mdl-layout__content {
height: calc(100vh - 50px);
}
(where 50px is the height of my mdl-layout__header)
solution4
0 2015-07-08 23:42:21
Make sure you have the meta viewport tag set:
<meta name="viewport" content="width=device-width">
If that doesn't make it work, then we may not have scrollable headers on mobile. Since the fixed class sets the layout to keep it at the top. If the viewport doesn't fix it, file an issue for this and the core team can triage further.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.