Ionic 2 Grid component doesn't work on IOS 10.2

Ionic Framework ionic-v3
1

I’m trying to create a complex layout using the Grid component my code looks something like this

  <ion-grid>
    <ion-row wrap>
      <ion-col width-50>
        <ion-row wrap>
          <ion-col>
            <post></post>
          </ion-col>
          <ion-col>
            <post></post>
          </ion-col>
          <ion-col>
            <post></post>
          </ion-col>
        </ion-row>
      </ion-col>

      <ion-col width-50>
        <ion-row wrap>
          <ion-col>
            <post></post>
          </ion-col>
          <ion-col>
            <post></post>
          </ion-col>
        </ion-row>

      </ion-col>
    </ion-row>
  </ion-grid>

In the android emulator, it works fine, but in IOS emulator (v10.2) it doesn’t work, it keeps going to the right and it doesn’t wrap.

Just to clear things out, I’m using the rows inside the column because the hight of the post changes dynamically, something similar to this image here https://www.google.jo/search?q=pinterest+ios+feed&biw=1280&bih=703&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjVt_nX-7zSAhUJFywKHZQ8DAQQ_AUIBigB#imgrc=df1kpbCz4rlCUM:

1 Like
2

I ended up using the following code in order for it to work

<div class="row">
    <div class="_50">
      <div *ngFor="let post of postsLBatch">
        <post [post]="post"></post>
      </div>
    </div>
    <div class="_50">
      <div *ngFor="let post of postsRBatch">
        <post [post]="post"></post>
      </div>
    </div>
  </div>

and the SASS here

.row {
    width: 100%; 
    display: flex;

    ._50 {
        width: 50%;
        padding: 5px;
    }
}
3

I’m having the same issue using ionic-angular 2.2.0 and the latest WKWebview on iOS. It’s working fine on desktop, android and ubuntu touch.

The row doesn’t wrap when all of the columns are col-xs-12, but when they are smaller (col-sm-6+) the wrap begins to work.

EDIT: Actually, the row wraps properly when the ion-split-pane is displayed (which I have set to the default of 768px, or md). Not col-sm like I said above.

4

For what it’s worth, I got things working by following the API docs (which are a bit unclear, I think), specifically Stack to Horizontal