Fixing wrap ion-row on iOS with ion-col without defined width

pascal.brokmeier
Mar 2, 2017 · 2 min read

I ran into this problem the other day:

Basically on iOS, the ion-col don’t wrap into the new line, if they don’t have a fixed width defined.

/*fix for ios*/
@media (max-width: 768px) {
ion-content.content-ios{
ion-row[wrap] {
ion-col {
flex-basis: 50%;
}
}
}
}
@media (max-width: 476px) {
ion-content.content-ios{
ion-row[wrap] {
ion-col {
flex-basis: 100%;
}
}
}
}

This solved it for me.

It makes the columns spread 100% but only if the screen is smaller than 476px, and to 50% on iPads

As you can see, its not a perfect fix, but it allows you to have cards with undefined widths as ion-row elements and have them grow to the space they need without loosing the nice wrap effect of having too many rows in a column.

<ion-row wrap>
<ion-col *ngFor="let country of (sectionsPerCountry | ota)" class="country-shape-col">
<ion-card class="country-shape-card" (click)="goCountry(country)" padding>

<img src="assets/img/country_shapes/{{country[0].country}}.svg" alt="">
<p class="card-title">
{{countries[country[0].country]}}
</p>

</ion-card>
</ion-col>
</ion-row>

I hope this helped!

curiouscaloo

Anything about technology and where our society and technology is heading towards

pascal.brokmeier

Written by

Software Developer, Tech enthusiast, student, board sports and food lover

curiouscaloo

Anything about technology and where our society and technology is heading towards

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade