Hi!
I am playing with ion-grid at the moment.
I tried the following code
HTML:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<ion-grid>
<ion-row style="max-width: 100%">
<ion-col *ngFor="let member of members">
<ion-card style="height: 150px; width: 150px; margin: auto">
<a href="">
<div class="thumbnail club" [style.backgroundImage]="'url(' + member.url_picture + ')'">
</div>
</a>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
SCSS:
page-home {
.thumbnail {
text-align: center;
width: 150px;
height: 150px;
background-size: 90% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
}
And controller:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
members: any[];
constructor(public navCtrl: NavController) {
this.members = [];
for (var i = 0; i < 36; i++) {
var member = { url_picture: "https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" };
this.members.push(member);
}
}
}
On simulator and on Android (on real device), no problem.
On iOS (on real device), the grid wraps in a ‘random’ way.
I still did not get why the grid did this on iOS.
Am I missing something so I can have a responsive grid on all platforms?