angular material md-tabs and md-grid-lists

问题

I can not get md-grid-list to visibly display within an md-tab.

I basically copied the md-grid-list from here https://material.angularjs.org/#/demo/material.components.gridList and embedded under a set of dyanmically generated tabs.

The grid list does not display on any tab from what I can tell. Ideally I would like the grid list to be aligned left and top under the tab if that makes sense. CSS is not really my forte ...

I have a sample fiddle here 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>

回答1:

I'm seeing the tiles in fiddle, or more accurately the tile footers, as the tiles are white on a white background. You'll need to scroll to see them though.

Try adding md-dynamic-height to <md-tabs>, i.e. <md-tabs md-dynamic-height> - that will give you more screen real estate for your tab content.

来源：https://stackoverflow.com/questions/29319282/angular-material-md-tabs-and-md-grid-lists

标签

css

angularjs

material-design