ion-grid некорректно отображается в проекте ionic / angular - PullRequest
Новая
       3

ion-grid некорректно отображается в проекте ionic / angular

1 голос
/ 27 мая 2020

Я пытаюсь отобразить два столбца в строке в моем проекте ionic / angular. И хотя я использую ion-grid с ion-row и двумя ion-col s, содержимое второго столбца перемещается вниз по странице, укладываясь под первый столбец, что для меня не имеет смысла. Вот мой 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>

Почему это происходит и что я могу сделать, чтобы исправить это?

1 Ответ

0 голосов
/ 27 мая 2020

Таким образом, если ширина обоих столбцов вместе превышает ширину контейнера по умолчанию, ion-raw, будучи гибким контейнером, позволит обернуть элементы внутри него.

Чтобы предотвратить такое поведение, вы можете принудительно использовать "nowrap" этот css класс: 

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

Под капотом он будет делать: 

flex-wrap: nowrap
...