CODEWITHSUNDEEP
cssangularionic-framework
Muirik
Muirik

Reputation: 6289

ion-grid not displaying correctly in ionic/angular project

I am trying to display two columns within a row in my ionic/angular project. And even though I'm using ion-grid with an ion-row and two ion-cols, the content of the second column is being bumped down the page, stacking below the first column - which makes no sense to me. Here is my HTML:

  <ion-grid>
    <ion-row style="border: none;" *ngFor="let word of words; let i = index">
      <ion-col style="border: none;">{{ word | acrossWord }}</ion-col>
      <ion-col style="border: none;">{{ word | downWord }}</ion-col>
    </ion-row>
  </ion-grid>

Why is this happening, and what can I do to rectify it?

Upvotes: 2

Views: 949

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

So in case the width of both columns together exceeds container width by default ion-raw being a flex container will allow elements inside of it to wrap.

To prevent this behavior you can force "nowrap" using this css class:

<ion-row class="ion-nowrap"></ion-row>

Under the hood it will do:

flex-wrap: nowrap

Upvotes: 1

Related Questions