угловой материал md-tabs и md-grid-lists

Question

Я не могу получить список md-grid для видимого отображения в пределах md-tab.

Я в основном скопировал список md-grid отсюда https://material.angularjs.org/#/demo/material.components.gridList и встроен под набор динамически созданных вкладок.

Список сетки не отображается на любой вкладке из того, что я могу сказать. В идеале я хотел бы, чтобы список сетки был выровнен слева и сверху под вкладкой, если это имеет смысл. CSS это на самом деле не моя сильная сторона ...

У меня есть образец скрипку здесь https://jsfiddle.net/lunfort/vsqs0dzw/5/

<div> 
    <md-tabs> 
    <md-tab ng-repeat="tabname in tabs" label="{{tabname}}"> 
     <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px" > 
     <md-grid-tile class="gray" md-rowspan="3" md-colspan="2"> 
      <md-grid-tile-footer> 
      <h3>#1: (3r x 2c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     <md-grid-tile class="green"> 
      <md-grid-tile-footer> 
      <h3>#2: (1r x 1c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     <md-grid-tile class="yellow"> 
      <md-grid-tile-footer> 
      <h3>#3: (1r x 1c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     <md-grid-tile class="blue"md-rowspan="2"> 
      <md-grid-tile-footer> 
      <h3>#4: (2r x 1c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     <md-grid-tile class="red" md-rowspan="2" md-colspan="2"> 
      <md-grid-tile-footer> 
      <h3>#5: (2r x 2c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     <md-grid-tile class="green" md-rowspan="2" > 
      <md-grid-tile-footer> 
      <h3>#6: (2r x 1c)</h3> 
      </md-grid-tile-footer> 
     </md-grid-tile> 
     </md-grid-list> 
    </md-tab> 
    </md-tabs> 
</div> 

Answer 1

Я вижу плитки в скрипку, или более точно плиточные колонтитулы, как плитка белого цвета на белый фон. Вам нужно будет прокрутить, чтобы увидеть их.

Просьба добавить md-dynamic-height к <md-tabs>, то есть <md-tabs md-dynamic-height> - это даст вам больше недвижимости на экране для содержимого вашей вкладки.