I'm having trouble getting the md-grid-list to appear inside an md-tab.
I copied the md-grid-list code from here and placed it under a series of dynamically generated tabs.
However, the grid list doesn't seem to be displaying on any of the tabs. Ideally, I would like the grid list to be positioned aligned left and top under the tab. I'm not very proficient in CSS...
You can view a sample fiddle of the issue here
<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>