Ion-cards in a horizontal scroll - possible?

Ionic Framework ionic-v3
1

Hey guys

I’m trying to create a horizontal scrollable collection of cards, but I can’t seem to make it work.

All the cards are underneath each other instead of side by side.
My guess is that some CSS-magic is needed, but I just can’t figure it out.

<ion-content padding>
  <h2>Adventure</h2>

  <ion-scroll scrollX="true" style="height: 500px" direction="x">
    <ion-card>
      <ion-card-content>
        <ion-card-title>
          Nine Inch Nails
          </ion-card-title>
        <p>
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        </p>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-content>
        <ion-card-title>
          Nine Inch Nails Live
          </ion-card-title>
        <p>
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        </p>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-content>
        <ion-card-title>
          Nine Inch Nails Live
          </ion-card-title>
        <p>
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        </p>
      </ion-card-content>
    </ion-card>
    <ion-card>
      <ion-card-content>
        <ion-card-title>
          Nine Inch Nails Live
          </ion-card-title>
        <p>
          The most popular industrial group ever, and largely
          responsible for bringing the music to a mass audience.
        </p>
      </ion-card-content>
    </ion-card>
  </ion-scroll>

</ion-content>

SCSS:

ion-card {
       width: 60%;
    }

image
image.png745×507 18.9 KB

Any help is appreciated!

1 Like
2

A width and display: inline-block should do it I think, might need to set a float too (left or none or unset) I can’t ever remember.

2 Likes
3

So you should set display inline-block to the cards, yes. Also you should set white-space to nowrap on this particular class: scroll-zoom-wrapper. that will do the trick!

2 Likes
4

One would assume they took care of that when you set the direction, I’d be surprised if they didn’t do that automatically :stuck_out_tongue:

1 Like
5

haha yes, definitely true… but I’ve experienced this a couple of times now

1 Like
6

You guys are both geniuses, it’s working now!

Just one last thing: how can I set the height om the ion-scroll to fit the height of the biggest card?
Setting min-height and height: auto doesn’t seem to work out.

ion-scroll {
        min-height: 200px; 
        height: auto;
}
1 Like
7

Hi @MattE,

Can you share the final code(html and scss) for this? I am trying to get it to work too but still could not do so.

8

Here you are

<ion-scroll scrollX="true" direction="x">
    <ion-card *ngFor="let item of listCardsAdventure">
      <ion-card-content>
        <ion-card-title>
          {{ item.title }}
          </ion-card-title>
        <button ion-item (click)="openDetailActivity(item)">            
          More info
          <ion-icon name="arrow-forward" item-right color="primary"></ion-icon>
        </button>
      </ion-card-content>
    </ion-card>
  </ion-scroll>

And the SCSS

.scroll-zoom-wrapper {
        white-space: nowrap;
    }

    ion-card {
        width: 500px !important;
        display: inline-block;
    }

    ion-scroll {
        min-height: 160px; 
        height: auto;

            .scroll-content {
            padding: 0px !important;
        }    
    }
8 Likes
9

how to do this ionic-v4 as horizontal scroll is happening without ion-card and i’m as div in place of ion-scroll