Come posso rendere l'intestazione scorrevole per schermi più piccoli in MDL?

Con MDL 1.0 (http://www.getmdl.io/) Sto cercando di rendere un'intestazione scorrevole sugli schermi più piccoli &. Ma è scorrevole solo su schermi più grandi (come sul mio pc), ma non su schermi più piccoli.Come posso rendere l'intestazione scorrevole per schermi più piccoli in MDL?

Ecco il codice 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>

Come si vede, l'intestazione è scorrevole, ma solo per schermi più grandi (come su PC). Ma se riduci la finestra, o la esegui su uno schermo più piccolo, l'intestazione è fissa e non scorrevole. Anche se rimuovo lo mdl-layout--fixed-header dal div esterno (div principale), l'intestazione scompare sugli schermi più piccoli.

Qualche idea su come rendere scorrevole l'intestazione su entrambi gli schermi più grandi e più piccoli?

fonte

2015-07-08 raulx222

vuoi dire intestazione non dovrebbe essere fissato su qualsiasi schermo? – Monkviper

@Monkviper No..it non dovrebbe essere corretto su nessuna schermata da quando ho aggiunto la classe 'mdl-layout__header - scroll' all'intestazione. – raulx222

Ho avuto lo stesso problema e l'ho risolto aggiungendo "flex-shrink: 0;" to .mdl-layout__content

fonte

2015-07-21 02:21:49 Devlesch

Eventuali effetti collaterali noti? – Melvin

Ne ho trovato uno. Se hai un 'mdl-layout__drawer' aperto, la pagina intera (incluso il cassetto) sarà scorrevole: https://jsfiddle.net/bf70rj0b/ (apri il cassetto e scorri). – Melvin

Come detto da Marco, è possibile risolverlo con .mdl-layout__drawer.is-visible ~ .mdl-layout__content {flex-shrink: 1;} –

Assicurati di avere il meta tag viewport insieme:

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

Se questo non farlo funzionare, allora non possiamo avere le intestazioni scorrevoli sul cellulare. Poiché la classe fissa imposta il layout per mantenerlo in alto. Se il viewport non lo risolve, presenta un problema per questo e il team principale può triage ulteriormente.

fonte

2015-07-08 23:42:21 Garbee

Viewport non cambia nulla ... – raulx222

Ho avuto lo stesso problema su un tema MDL Wordpress. Ho avuto l'intestazione per scorrere con il resto del thepage sulle dimensioni piccolo schermo con aggiungendo il seguente CSS:

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

Usando questo metodo consente la barra degli indirizzi di Chrome sui cellulari di essere spinto fuori dallo schermo durante lo scorrimento (che era il mio obiettivo principale).

Ho anche mantenuto l'intestazione visibile in cima alla pagine su piccoli schermi con questo CSS:

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

fonte

2015-08-01 04:19:10 twinfield

Di seguito sull'alberino Devleshes', sostituendo l'altezza di MDL-layout__content con la seguente impedirà doppie barre di scorrimento.

Il seguente frammento fa il trucco per me:

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

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

(dove 50px è l'altezza del mio MDL-layout__header)

fonte

2016-03-31 18:41:26

Penso che una soluzione migliore sarebbe: .mdl-layout__drawer.is-visible ~.mdl-layout__content {flex-shrink: 1; } Poiché non si desidera tenere a mente l'altezza dell'intestazione. :) –

Come posso rendere l'intestazione scorrevole per schermi più piccoli in MDL?

risposta

Problemi correlati