Ionic 2 horitzonal scroll with ion items - ionic-framework

Question

I'm trying to create a list of avatars, and each avatar to appear in the right of the previous avatar. When an avatar reaches the end of the screen, the user will be able to scroll left or right to see more avatars.
I achieved this with the following code which worked in the previous ionic grid version, and now no longer works and when an avatar reaches the end of the screen, a new line is created instead of keep added to the same line with an option to scroll horitzonally:
<ion-scroll scrollX="true" class="chooseBg" style="height:70px">
<ion-row>
<ion-col *ngFor="let avatar of avatars"
style="padding-right:0">
<ion-item>
<ion-avatar>
<img
[src]="avatarImage(avatar)"/>
</ion-avatar>
</ion-item>
</ion-col>
</ion-row>
</ion-scroll>
Any ideas how I can create hortizonal scroll of items using latest ionic grid system? (Ionic 2.2)

Answer 1

This is my Horizontal Scroll with clickable Cards in it:
<ion-scroll scrollX="true" class="item" style="width:100vw;height:100%;margin:0px;padding:0px;">
<ion-row>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Rap")'>
<img style="width:33vw;" src="assets/img/rap.png"/>
<div text-wrap class="card-title-mini">Rap</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Singing")'>
<img style="width:33vw;" src="assets/img/sing.png"/>
<div text-wrap class="card-title-mini">Singing</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Skateboard")'>
<img style="width:33vw;" src="assets/img/skateboarding.png"/>
<div text-wrap class="card-title-mini">Skateboard</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Workout")'>
<img style="width:33vw;" src="assets/img/workout.png"/>
<div text-wrap class="card-title-mini">Workout</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Drawing Tattoo")'>
<img style="width:33vw;" src="assets/img/drawingtattoo.png"/>
<div text-wrap class="card-title-mini">Drawing Tattoo</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Shuffle")'>
<img style="width:33vw;" src="assets/img/shuffle.png"/>
<div text-wrap class="card-title-mini">Shuffle</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Gaming")'>
<img style="width:33vw;" src="assets/img/gaming.png"/>
<div text-wrap class="card-title-mini">Gaming</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Beatbox")'>
<img style="width:33vw;" src="assets/img/beatbox.png"/>
<div text-wrap class="card-title-mini">Beatbox</div>
</ion-card>
</ion-col>
</ion-row>
</ion-scroll>
Well its hardcoded but you can fill it like you do with *ngFor as well.
this is my css:
ion-card {
position: relative;
text-align: center;
margin: 0;
}
.column-width {
width: 100px;
}
.card-width {
width: 33vw;
padding: 0px !important;
margin: 0px !important;
background-color : transparent;
color : transparent;
height: 33vw;
}
.card-title-mini {
position: absolute;
top: 45%;
font-size: 5vw;
width: 100%;
color: #fff;
font-weight: bold;
}
This scroll works on all devices and browsers.
Maybe my scroll might be helpfull for you.