Virtual-scroll inside a ion-col

Ionic Framework
1 
    <ion-grid>
      <ion-row>
        <ion-virtual-scroll [items]="students" approxHeaderHeight="44px" approxItemHeight="270px">
          <ion-col *virtualItem="let student" size="4">
            <ion-card>
                // content
           </ion-card>
        </ion-col>
     </ion-virtual-scroll>
   </ion-row>
</ion-grid>

Screenshot_2019-06-09%20Ionic%20App
Screenshot_2019-06-09 Ionic App.png356×578 16.7 KB

Hi

I been trying to make a virtual scroll with 3 columns

But what it does is render the item as multiple rows with size 4.

What I am expecting is a list of multiple colums so I can show the 3 info cards in a row when on Desktop mode.

Writing it like this doesn’t help either. Nothing is shown:

        <ion-virtual-scroll [items]="students" approxHeaderHeight="44px" approxItemHeight="270px">
    <ion-grid>
      <ion-row>
          <ion-col *virtualItem="let student" size="4">
            <ion-card>
                // content
           </ion-card>
        </ion-col>
   </ion-row>
</ion-grid>
     </ion-virtual-scroll>
2

@bandito You found a solution? I have the same issue…

3

Sorry for the late reply.

I did find a solution and that was CSS all the things.

4

Do you mind sharing your solution?

5

This is what I have, I moved to StencilJS now so I haven’t upgraded this app in awhile

  <ion-virtual-scroll [items]="students">
    <div class="bottom" *virtualItem="let student">
      <ion-card>
        <ion-card-header>
          <ion-card-title>{{student.firstName}}
            <span *ngIf="student.initial">{{student.initial[0]}}.</span> {{student.lastName}}
          </ion-card-title>
          <ion-card-subtitle>
            <span class="label">ID: </span>{{student.id}}
          </ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <ion-grid>
            <ion-row>
              <ion-col size="3">
                <ion-thumbnail>
                  <ion-img src="{{student.picture}}" alt="{{student.firstName}}'s profile image"></ion-img>
                </ion-thumbnail>
              </ion-col>
              <ion-col size="9">
                <ion-item lines="none" *ngIf="student.class">
                  <ion-label class="ion-text-wrap">
                    <span class="label">{{htmlControls.class}}</span>{{student.class}}
                  </ion-label>
                </ion-item>
                <ion-item lines="none" *ngIf="student.phoneNumber">
                  <ion-label class="ion-text-wrap">
                    <span class="label">{{htmlControls.phone}}</span>{{student.phoneNumber}}
                  </ion-label>
                </ion-item>
              </ion-col>
            </ion-row>
          </ion-grid>
          <ion-buttons>
            <ion-button fill="solid" color="primary" (click)="addAttendance({id: student.id})">
              {{htmlControls.attended}}
            </ion-button>
            <ion-button fill="solid" color="secondary" (click)="addAbsence({id: student.id})">
              {{htmlControls.absence}}
            </ion-button>
            <ion-button fill="solid" color="tertiary" (click)="goToProfile(student.id)">
              {{htmlControls.profile}}
            </ion-button>
            <ion-button fill="solid" color="dark" (click)="showNotes(student.id)">
              <ion-icon name="paper"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-item lines="none" *ngIf="toggle == student.id" class="top">
            <textarea #notes (keyup)="addNotes({id: student.id, notes:notes.value})">{{student.notes}}</textarea>
          </ion-item>
          <ion-item lines="none" class="attended" >
            <ion-label *ngIf="student.attendance" class="ion-text-wrap">
              {{student.firstName}}{{htmlControls.present}}
            </ion-label>
            <ion-label *ngIf="student.absence" class="ion-text-wrap">
              {{student.firstName}}{{htmlControls.absent}}
            </ion-label>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </div>
  </ion-virtual-scroll>