Ion-row: wrap attribute doesn't work on ios devices

Ionic Framework ionic-v3
6

the problem with this solution is that it will break views on big screens. A row will always fill 100% of the screen, which is not the desired effect. I have not yet found a way to avoid defining a certain width for an element, but I have found a css ‘fix’ that allows you to at least have a consistent look on mobile and tablets vs. browsers

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

I wrote a bit about it on medium , which helps visualising because of some screenshots

2 Likes