Wie kann ich Header für kleinere Bildschirme in MDL scrollbar machen?

Mit MDL 1.0 (http://www.getmdl.io/) Ich versuche, eine Überschrift scrollbar auf größeren & kleineren Bildschirmen zu machen. Aber es ist nur auf größeren Bildschirmen scrollbar (wie auf meinem PC), aber nicht auf kleineren Bildschirmen.Wie kann ich Header für kleinere Bildschirme in MDL scrollbar machen?

Hier ist der html:

<html> 
 
<head> 
 
\t <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.teal-light_green.min.css" /> 
 
\t <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> 
 
\t <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>

Wie Sie sehen, wird der Header scrollbaren ist aber nur für größere Bildschirme (wie auf dem PC). Aber wenn Sie das Fenster verkleinern oder es nur auf einem kleineren Bildschirm ausführen, ist die Kopfzeile fest und nicht scrollbar. Auch wenn ich die mdl-layout--fixed-header aus dem äußeren div (main div) entfernen, verschwindet die Kopfzeile auf kleineren Bildschirmen.

Haben Sie eine Idee, wie Sie die Kopfzeile auf größeren und kleineren Bildschirmen scrollen können?

Quelle

2015-07-08 raulx222

meinen Sie Header sollte nicht auf einem Bildschirm befestigt werden? – Monkviper

@Monkviper No.it sollte nicht auf irgendeinem Bildschirm behoben werden, seit ich die "mdl-layout__header - scroll" -Klasse zum Header hinzugefügt habe. – raulx222

Ich hatte das gleiche Problem und ich löste es durch Hinzufügen von "flex-shrink: 0;" zu .mdl-layout__content

Quelle

2015-07-21 02:21:49 Devlesch

Bekannte Nebenwirkungen? – Melvin

Nur eins gefunden. Wenn Sie eine 'mdl-layout__drawer 'geöffnet haben, ist die ganze Seite (einschließlich der Schublade) scrollbar: https://jsfiddle.net/bf70rj0b/ (öffnen Sie die Schublade und scrollen Sie). – Melvin

Wie Marco erwähnt, können Sie es mit .mdl-layout__drawer.is-visible beheben ~ .mdl-layout__content {flex-shrink: 1;} –

Stellen Sie sicher, dass die Meta-Darstellungsfeld-Tag gesetzt haben:

<meta name="viewport" content="width=device-width">

Wenn das es nicht funktioniert, dann können wir nicht scrollbaren Header auf mobilen haben. Da die feste Klasse das Layout so einstellt, dass es oben bleibt. Wenn das Ansichtsfenster es nicht behebt, lege ein Problem dafür fest und das Kernteam kann weiter sondieren.

Quelle

2015-07-08 23:42:21 Garbee

Viewport ändert nichts ... – raulx222

Ich hatte das gleiche Problem, an einem MDL Wordpress Theme zu arbeiten. Ich habe den Header mit dem Rest thepage auf kleine Bildschirmgrößen blättern Sie mit durch die folgende CSS hinzufügen:

@media screen and (max-width: 850px) { 
    .mdl-layout__container { 
     position: static; 
    } 
}

Mit dieser Methode ermöglicht es die Chrome URL-Leiste auf dem Handy abgeschoben Bildschirm wird beim Scrollen (das war mein Hauptziel).

Ich hielt auch den Header sichtbar an der Spitze der Seiten auf kleinen Bildschirmen mit diesem CSS:

@media screen and (max-width: 850px) { 
    .mdl-layout__header { 
     display: block; 
    } 
}

Quelle

2015-08-01 04:19:10 twinfield

Als Follow-up auf Devleshes' Post, die Höhe von mdl-layout__content mit folgenden ersetzt wird verhindert, Doppelte Bildlaufleisten.

Der folgende Ausschnitt funktioniert der Trick für mich:

.mdl-layout__content { 
    flex-shrink: 0; 
} 

.mdl-layout__drawer.is-visible~.mdl-layout__content { 
    height: calc(100vh - 50px); 
}

(wo 50px die Höhe meines mdl-layout__header ist)

Quelle

2016-03-31 18:41:26

Ich denke, eine bessere Lösung wäre: .mdl-layout__drawer.is-visible ~.mdl-layout__content {flex-shrink: 1; } Da Sie nicht die Höhe Ihrer Kopfzeile berücksichtigen möchten. :) –

Wie kann ich Header für kleinere Bildschirme in MDL scrollbar machen?

Antwort

Verwandte Themen