Horizontal Scroll Bar in Ionic2+

Question

Hi I have the following markup in my ionic2 app, using tabs template. I want an horizontal scroll bar for each zone.

<ion-content>
  <ion-list>
    <ion-item-group *ngFor="let zone of zones">
      <ion-scroll scrollX="true">
        <ion-item-divider>
          ZONA: {{zone.zoneName}}
        </ion-item-divider>
        <ion-row>
          <ion-col col-4><h5>Equipo</h5></ion-col>
          <ion-col><h5>Pts</h5></ion-col>
          <ion-col><h5>PJ</h5></ion-col>
          <ion-col><h5>PG</h5></ion-col>
          <ion-col><h5>PE</h5></ion-col>
          <ion-col><h5>PP</h5></ion-col>
          <ion-col><h5>GF</h5></ion-col>
          <ion-col><h5>GC</h5></ion-col>
          <ion-col><h5>Dif</h5></ion-col>
        </ion-row>
        <ion-item *ngFor="let team of zone.zoneTeams">
          <ion-row>
            <ion-col col-4>{{team.name}}</ion-col>
            <ion-col>{{team.points}}</ion-col>
            <ion-col>{{team.matchesPlayed}}</ion-col>
            <ion-col>{{team.matchesWon}}</ion-col>
            <ion-col>{{team.matchesDrawn}}</ion-col>
            <ion-col>{{team.matchesLost}}</ion-col>
            <ion-col>{{team.goalsScored}}</ion-col>
            <ion-col>{{team.goalsReceived}}</ion-col>
            <ion-col>{{team.dif}}</ion-col>
          </ion-row>
        </ion-item>
      </ion-scroll>
    </ion-item-group>
  </ion-list>
</ion-content>

When adding the scroll tags I didn't see anything. Did I miss something? I'm working with the latest ionic I followed this link http://ionicframework.com/docs/api/components/scroll/Scroll/

Answer 1

When adding the scroll tags I didn't see anything

Ion Scroll requires to be provided with fixed dimensions either through style or scss class.

<ion-scroll scrollX="true" style="width: 100vw;height: 50px;">
   <!-- your scrollable content -->
</ion-scroll>