<md-grid-list
md-cols-sm="2" md-cols-md="2" md-cols-gt-md="6"
md-row-height-gt-md="1:1" md-row-height="2:2"
md-gutter="4px" md-gutter-gt-sm="4px">
<md-grid-tile ng-repeat="candidate in records"
md-rowspan="1"
md-colspan="1"
md-colspan-sm="1">
<md-grid-tile-header>
<md-checkbox class="md-primary"><h3>{{candidate.name}}</h3></md-checkbox>
</md-grid-tile-header>
<figure>
<img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
</figure>
<md-grid-tile-footer>
<h3 ng-if="candidate.title == -1">{{candidate.date}}</h3>
<h3 ng-if="candidate.title == 0" style="color: #e42012;"><i class="icon ion-close"></i></h3>
<h3 ng-if="candidate.title == 1" style="color: #28a54c;"><i class="icon ion-checkmark"></i></h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Above code shows a implementation I used show a image grid list with ionicframework and angular materials. The problem is when I run it in mobile no image is dispalyed, but in desktop chrome it shows images. Can anyone show me problem I'm having this code or am I using these tags wrongly.
Thank you.
I was running into a similar issue with desktop chrome displaying the images inconsistently - sometimes appearing sometimes not - but all other browsers were displaying the image everytime.
The cause is specifying the image dimensions within the image tag seems to conflict with material design.
<figure>
<img ng-src="/templates/img/{{candidate.image}}" width="100%" height="100%">
</figure>
Example of material designs' dynamic calculation of styles
style="left: calc(((33.3333333333333% - 0.666666666666667em) + 1em) * 1); width: calc(((33.3333333333333% - 0.666666666666667em) * 1) + 0em); padding-top: calc(((25% - 0.666666666666667em) * 1) + 0em); margin-top: calc(((25% - 0.666666666666667em) + 1em) * 0);"
Specifying the image dimensions in the css should allow the image display to work correctly.
figure img {
height: 100%;
width: 100%;
}