Horizontal scrolling grid

Ionic Framework ionic-v3
1

How does one now create an ion-grid that has unlimited columns and scrolls horizontally?

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
3

Hi,
I tried like you say, but I get something like this.
32

I see you use forecast_div class, but you never declare on css file.

Thank you

4

This is my html code.

<ion-content>

    <ion-grid>
        <ion-row nowrap class="forecast_container">
            <ion-col col-3 class="forecast_div"><img class="brand-logo" src="assets/imgs/burger_king_logo.png">
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3 class="forecast_div">
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3 class="forecast_div">
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
            <ion-col col-3 class="forecast_div">
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
                <br>
                <ion-img class="brand-logo" src="assets/imgs/burger_king_logo.png"></ion-img>
            </ion-col>
        </ion-row>
    </ion-grid>

</ion-content>
5

It works! But if you use overflow-x: visible!important; the scrollbar is not visible if it is not necessary.

overflow-x: visible!important;

Thank you!

6 
<ion-row class="forecast_container">
<ion-col>.......</ion-col>
<ion-col>.......</ion-col>
<ion-col>.......</ion-col>

</ion-row>

.forecast_container{
  flex-wrap: nowrap;
  overflow-x: scroll!important;
  overflow-y: hidden;
}
2 Likes
7

will the scroll bar show when on mobile