how to do horizontal scroll in ionic 3

angular, css, ionic2, ionic3, scroll

Solution

It looks like `ion-row` within your scroll is wrapping the items.

Try using `nowrap` attribute.

Adds flex-wrap: nowrap. Forces the columns to a single row.

<ion-scroll scrollX="true" style="width:100vw; height:50px" >
  <ion-row nowrap class="headerChip">
    <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
    <ion-chip  (click)="changeData(tabName)">
    <ion-label  >{{tabName.languagename}}</ion-label>
    <div></div>
    </ion-chip>
    </div>
  </ion-row>
</ion-scroll>

Problem

look at my I have 10 names in the ion-scroll but it is coming to the next line like a paragraph. here is my .html code. ``` <ion-scroll scrollX="true" style="width:100vw; height:50px" > <ion-row class="headerChip"> <div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'"> <ion-chip (click)="changeData(tabName)"> <ion-label >{{tabName.languagename}}</ion-label> <div></div> </ion-chip> </div> </ion-row> </ion-scroll> ``` here is my css ``` .headerChipGray{ ion-chip.chip.chip-md{ margin: 2px 2px 2px 2px; border-radius: 10px; border: 1px solid gray; background: white; } ion-chip.chip.chip-ios{ margin: 2px 2px 2px 2px; border-radius: 10px; border: 1px solid gray; background: white; } } .headerChipGreen{ ion-chip.chip.chip-md{ margin: 2px 2px 2px 2px; border-radius: 10px; background: white; color: #A80C50; border: 1px solid #A80C50; } ion-chip.chip.chip-ios{ margin: 2px 2px 2px 2px; border-radius: 10px; background: white; color: #A80C50; border: 1px solid #A80C50; } } ``` this same piece of code used to work in ionic 2 after updating to ionic 3 i am facing this issue what i am missing ionic doc for ion-scroll

Original source