how to do horizontal scroll in ionic 3

Question

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.

Answer 1

This simple CSS styling will get your job done more easier. Wrap your content inside a div and add the below styling to that div. This should work irrespective of any Ionic version. However, I'm using Ionic 5.

CSS / SCSS

.horizontal-scroll {
    overflow: auto;
    white-space: nowrap;
}

HTML

<div class="horizontal-scroll">
  <ion-chip>
    <ion-label>Java</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Node.js</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Fusion.js</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>React</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Redux</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>Angular</ion-label>
  </ion-chip>
  <ion-chip>
    <ion-label>JavaScript</ion-label>
  </ion-chip>
</div>

You can check here for working example that I've created.

Answer 2

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>