角度材料 md-tabs 和 md-grid-lists答案

【问题标题】：angular material md-tabs and md-grid-lists角度材料 md-tabs 和 md-grid-lists
【发布时间】：2015-06-01 21:05:46
【问题描述】：

我无法让 md-grid-list 在 md-tab 中明显显示。

我基本上从这里https://material.angularjs.org/#/demo/material.components.gridList 复制了 md-grid-list 并嵌入在一组动态生成的选项卡下。

据我所知，网格列表不会显示在任何选项卡上。理想情况下，如果有意义的话，我希望网格列表在选项卡下左对齐和上对齐。 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>

【问题讨论】：

标签： css angularjs material-design

【解决方案1】：

我看到的是小提琴中的瓷砖，或者更准确地说是瓷砖页脚，因为瓷砖在白色背景上是白色的。你需要滚动才能看到它们。

尝试将md-dynamic-height 添加到<md-tabs>，即<md-tabs md-dynamic-height> - 这将为您的标签内容提供更多的屏幕空间。

【讨论】：