Displaying ion-grid - Issue with iOS device


#1

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?


#2

I finally solved the problem specifiying behaviour to adopt on various screen sizes with the following code.

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <ion-grid>
    <ion-row style="max-width: 100%">
      <ion-col col-6 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-2 *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>