[Solved] Add padding between ion-card elements

Ionic Framework ionic-v3
1

I’m attempting a google-esque card display with horizontally scrollable cards. To achieve horizontal scrolling I am making use of <ion-scroll scrollX="true">. Scrolling is working fine, my only issue is that I can’t figure out how to change the distance between the cards.

My result and what I’m aiming for spacing wise.

My Result
My Result.png396×689 14.4 KB

material-design-cards
material-design-cards.png2336×1162 19.8 KB

I thought adding horizontal-padding would help me to recreate this, but that style seems to apply to the contents of the card instead of the outside.

From what I’ve read that’s what should work. Any insight would be appreciated. Thanks.

2

hey @Augie, would you mind to provide your html and scss files?

3

Of course, my apologies for the oversight.

<ion-scroll scrollX="true" style="width:100%; height:200px;">
    <div class="inner" [style.width.px]="width">
        <ion-card *ngFor="let card of cards">
            <ion-card-header text-center>
                {{card.title}}
            </ion-card-header>
            <ion-card-content>
                {{card.description}}
            </ion-card-content>
        </ion-card>
    </div>
</ion-scroll>

Where cards is an array of cards and width is cards.length * 200.

scrollable-card {
  .inner{
    height: 100px;
    ion-card{
      width: 200px;
      height: 120px;
      display: inline-block;
    }
  }



}
4

I accidentally opened the scss file for the page where this component lives and realized I had written some styles in there that were overwriting anything I modified in the component specific scss file. Complete mistake; I knew cards had padding on their own.

Thanks for attempting to help @quieterkali .

Please view this issue as resolved.