CODEWITHSUNDEEP
cssangularjsionic-frameworkhorizontal-scrolling
Gaurav Saini
Gaurav Saini

Reputation: 77

Using horizontal scroll cards in mobile using ionic

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.

Upvotes: 1

Views: 3781

Answers (2)

Neven.Leung
Neven.Leung

Reputation: 860

ion-scroll have support for horizonal scrolling.

Use 

<ion-scroll direction="x" style="white-space: nowrap"></ion-scroll>

to replace your code

<hscroller></hscroller>

Upvotes: 1

Karan Kumar
Karan Kumar

Reputation: 2665

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

Upvotes: 1

Related Questions