Using horizontal scroll cards in mobile using ionic

Question

I am just starting with ionic. I am trying to use the Ionic Horizontal Scroll Cards. It looks like this, codepen: http://codepen.io/drewrygh/pen/jEJGLx

Now when i am using it in a template which has this structure:

<ion-view title="Videos">
    <ion-content>
            <hscroller>
                <hcard ng-repeat="item in items" index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
            </hscroller>
    </ion-content>
</ion-view>

But the scroll doesn't work on mobile, while searching i found that the hscroller element should be placed inside an ion-pane. But when i do that the list appears for a micro second and then disappears. I can't figure out why. code pen: http://codepen.io/anon/pen/RWRzPj Here i have just added <ion-content> and <ion-pane> tags around hscroller.

(note: Chrome/Firefox DevTools must be used to emulate a mobile device when viewing the Codepen example.) ref. here. — LeftyX

Karan Kumar Karan Kumar · Accepted Answer · 2015-09-22T19:12:34

Why not use a <ion-scroll> with horizontal scroll. You can easily create horizontal card view with that.

PS: the last code pen you provided. You needed to add

.scroll{
    height:100%
}

CodePen

Though this does not solve the scroll issue, for that I suggest the above.

ion-scroll

Using horizontal scroll cards in mobile using ionic

2 Answers