How to do vertical scroll in ionic 3

@saifk wrote:

I am working on a e-learning app and i am designing a test page.My question navigation is shown in image below.I have 20-30 question in a single test and i want vertical scrolling in the question navigation and also when user attempt question 8 it will automatically show next slide of 8 questions(9-16).

.ts code

 public question = [
    { id: 1 },{ id: 2 },{id: 3 },{ id: 4 },{ id: 5 },{ id: 6 },
    { id: 7 },{ id: 8 },{ id: 9 },{ id: 10 },{ id: 11 },{ id: 12 },
    { id: 13 }, { id: 14 },{ id: 15 },{ id: 16 },{ id: 17 },{ id: 18 }
  ]

.html code

<ion-row nowrap class="headerChip">
    <div *ngFor="let item of question; let idx = index" >
    <ion-chip  (click)="changeData(item.id)" style="width: 38px">
    <ion-label >{{item.id}}</ion-label>
    <div></div>
    </ion-chip>
    </div>
  </ion-row>

.css code

.chip-md {
    border-radius: 19px;
    height: 38px;
    width: 38 px;
    font-size: 13px;
    line-height: 38px;
    color: rgba(0, 0, 0, 0.87);
    background: rgba(0, 0, 0, 0.12);
    margin: 2px 4px;
}
.chip-md > ion-label {
    margin: 0 10px 0px 15px;
}

Posts: 1

Participants: 1

Read full topic