Иони c сетка вертикальная прокрутка только с одним рядом - PullRequest
Новая
       74

Иони c сетка вертикальная прокрутка только с одним рядом

0 голосов
/ 15 апреля 2020

Я строю адаптивную сетку с N столбцами в одной строке. Причина, по которой они располагаются в одной строке, заключается в том, что количество столбцов в строке зависит от ширины экрана (аналогично адаптивной сетке bootstrap). У меня есть список изображений, которые я получаю с сервера и показываю их в каждом столбце внутри сетки. вот код для этого 

 <ion-grid>
    <ion-row *ngIf="data && data.length > 0">
       <ion-col size="6" size-md="4" size-lg="3" class="grid-box"  *ngFor="let d of data">
        <div class="dummy-square"></div> 
        <img [src]="d" >
     </ion-col>
    </ion-row>
 </ion-grid>

Теперь проблема в том, что это всего лишь одна строка,

, если у меня есть только пара элементов, то элементы располагаются вертикально вверх, а не сверху, как это

enter image description here

, что мне нужно, это

enter image description here

, и если у меня есть больше предметов чем то, что я могу уместить на экране, тогда весь ряд будет отцентрирован по вертикали, и поэтому верхние несколько строк будут находиться вне экрана, а не закрепляться сверху, как это

enter image description here

но я хочу вот это

enter image description here

Мне кажется, что это все из-за одного ряда, но я могу ошибаться. Может кто-нибудь, пожалуйста, предложить любое решение.

Спасибо

1 Ответ

0 голосов
/ 16 апреля 2020

наконец обнаружил проблему, моя ионная сетка была обернута внутри контейнера и применен следующий стиль 

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

Удалите их, и это исправлено

...