Menu
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?
774
I had the same issue and I resolved it by adding "flex-shrink: 0;" to .mdl-layout__content
144
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;
}
}
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)
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With