Horizontal scrolling grid

Ionic Framework ionic-v3
2 
<ion-grid >
        <ion-row nowrap class="forecast_container">
        <ion-col col-3 class="forecast_div">{{data.imd_forecast[0][0]}}
          <br>{{data.imd_forecast[0][4]}}</ion-col>
        <ion-col col-3>{{data.imd_forecast[1][0]}}
          <br>{{data.imd_forecast[1][4]}}</ion-col>
        <ion-col col-3 class="forecast_div">{{data.imd_forecast[2][0]}}
          <br>{{data.imd_forecast[2][4]}}</ion-col>
        <ion-col col-3 >{{data.imd_forecast[3][0]}}
          <br>{{data.imd_forecast[3][4]}}</ion-col>
        <ion-col col-3 class="forecast_div">{{data.imd_forecast[4][0]}}
          <br>{{data.imd_forecast[4][4]}}</ion-col>
        <ion-col col-3>{{data.imd_forecast[5][0]}}
          <br>{{data.imd_forecast[5][4]}}</ion-col>
        <ion-col col-3 class="forecast_div">{{data.imd_forecast[6][0]}}
          <br>{{data.imd_forecast[6][4]}}</ion-col>
          </ion-row>
      </ion-grid>

CSS

.forecast_container{
        overflow-x: scroll!important;
        overflow-y: hidden;
        word-wrap: break-word;
        height:20vw;
        font-size:0.8em;
        font-weight:300;
}

Hope this will work for you. All the best

5 Likes