CODEWITHSUNDEEP
cssangularjsionic-framework
sac Dahal
sac Dahal

Reputation: 1241

ionic cards with ng-repeat with spaces between them

I have to display a series of cards using ng-repeat. Something like. enter image description here

What I am currently doing is 

<ion-view view-title="Active">


  <div class ='child_div_1'>
    <div class="card cardS" collection-item-width="'20%'" collection-item-height="40%">
      <div class="item item-text-wrap">
        <p>dljfweiuf</p>
      </div>
    </div>

  </div>

  <div class ='child_div_2'>
    <div class="card" collection-repeat="item in items" collection-item-width="'25%'" collection-item-height="60%">
      <div class="item item-text-wrap "  id="cards">
        {{item}}
      </div>
    </div>
  </div>
</div>

What I am getting in my view is enter image description here Can anyone help me with how to create gap between the cards the gap between two cards.

Upvotes: 0

Views: 2275

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41427

add padding css property to the ng repeating div 

<div class ='child_div_2'>
    <div class="card" collection-repeat="item in items" collection-item-width="'25%'" collection-item-height="60%" style="padding: 15px;">
      <div class="item item-text-wrap "  id="cards">
        {{item}}
      </div>
    </div>
 </div>

Upvotes: 1

Related Questions