Horizontal scrolling grid


#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


Horizontal scroll ion grid
#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>