Elementi di contenuto scorrevole con schede altezza dinamica Materiale angolare

Question

Questa domanda è stata trovata severa l t imes durante l'evoluzione di Angular Material, ma non sono in grado di far funzionare nessuno dei suggerimenti per v1.0.5. L'intera pagina (o il contenitore flessibile) scorre, spostando le schede fuori dalla vista.

Come è possibile ottenere elementi di scorrimento a tutta altezza?

<div flex> 
    <md-tabs md-dynamic-height md-border-bottom> 
     <md-tab label="one"> 
      <md-content class="md-padding"> 

Demo fiddle

Bonus Karma per incorporare custom scrollbars.

Answer 1

Ho lavorato fuori. Rimuovendo la direttiva dynamic-height, quindi utilizzando posizionamento assoluto, sta funzionando:

.tabs-wrapper { 
    position: relative; 
} 
.full-size { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

<div ng-app="sandbox"> 
    <div flex class="tabs-wrapper"> 
     <md-tabs class="full-size" md-border-bottom> 

Fiddle demo

posizionamento assoluto è necessario per get the child of a flex element to expand.

Nota: l'altezza non è corretta nella demo del fiddle. Questo problema non si verifica nel mio progetto.

Answer 2

Avvolgere il contenuto della scheda all'interno di un div e assegnarlo all'altezza massima.

<md-tab label="two"> 
     <md-content class="md-padding"> 
      <div class="tab-content"> 
       <h1 class="md-display-2">Tab Two</h1> 
      <div> 
     <md-content> 
<md-tab> 

e parte css

div.tab-content{ 
    max-height:350px; 
} 

Js-fiddle link

Answer 3

Prova questo:

md-tabs-wrapper { 
    position : fixed; 
    width: 100%; 
    z-index: 1; 
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); 
} 

md-tabs-content-wrapper { 
    margin-top: 48px; 
}