CODEWITHSUNDEEP
angularionic2
Sam
Sam

Reputation: 559

horizontal scrollable cards ionic2

I am new to mobile web development. I'm using Ionic2 as my framework. In my app I want to present the users with a horizontal scrollable view of cards. This is quite common in apps in the market like Google Play, Redbox etc.

Any pointers or help is appreciated. Thanks!

Upvotes: 0

Views: 2923

Answers (2)

Raymond Ativie
Raymond Ativie

Reputation: 1826

The ion-card is by default a block element. So a CSS rule to make it an inline-block element instead does the trick. And giving it a width also;

HTML

<ion-scroll scrollX="true"> 
       <ion-card *ngFor="#item of items"> 
           <ion-item>
             <img src="http://placehold.it/350x150"> 
           </ion-item>
        </ion-card> 
    </ion-scroll>

CSS

ion-scroll {
  white-space: nowrap;
  height: 150px
}

img{
  margin: 10px;
}

ion-card{
  width: 30vw;
  display: inline-block;
}

This is a plunker: http://codepen.io/RaymondAtivie/pen/ZORvzd

Upvotes: 0

Manu Vald&#233;s
Manu Vald&#233;s

Reputation: 2371

Take a look at this codepen from the official ionic team. The relevant keywords are scrollX=true in the ion-scroll, and 

ion-scroll { white-space: nowrap; 
height: 150px }

For the ion-scroll css.

Upvotes: 3

Related Questions