Angular material md-tabs and md-grid-lists

Question

I can not get the md-grid list to appear in the md tab.

I basically copied md-grid-list from here https://material.angularjs.org/#/demo/material.components.gridList and is embedded in a set of dynamically created tabs.

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

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

Answer 1

I see tiles in the violin, or rather footers, because the tiles are white on a white background. You will need to scroll to see them.

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