Hi I have the following AngularJS Grid:
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" 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="2" md-colspan="2" md-colspan-sm="1">
<div class="blog-tile-bg" style="background-image:url('https://1.bp.blogspot.com/-B6IEBKet9Qc/VuBROoZ8y-I/AAAAAAAABDU/ez8KKA7c6UM/s1600/12671652_1253577308004984_1098070077500218081_o.jpg')">
</div>
<md-grid-tile-footer>
<h3>#1: (3r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Now as you can see I have a div with the class of blog-tile-bg, this element is set to 100% width and height so it covers the whole tile.
Now the issue I am having is that my md-grid-tile-footer element seems to overlay the blog-tile-bg by default using absolute positioning however I want this to stack below this element instead and scale in size based on content within it.
I have not seen an example of this anywhere, every example I have seen includes the md-grid-tile-footer element with absolute positioning applied, for example: https://material.angularjs.org/latest/demo/gridList
I have tried removing the absolute positioning however it doesn't react the way it should.
Any help would be great, thanks Nick