kankamuso kankamuso - 4 months ago 32
AngularJS Question

collection-repeat on thumbnail cards and weird margins

I am building a collection-repeat that iterates through my objects and fills up cards based on them. I have two main questions to complete my job. I have been using 'Thumbnail' cards when using this approach but I am not able to correctly set margins. It basically adds some margin on the left and none on the right nor between different cards (bottom margin). I have tried CSS, but nothing works.

This is my HTML code:

<div class="card" collection-repeat="item in items" item-width="'100%'">
<div class="item item-divider">
{{item.eventTitle}}
</div>

<div class="item item-text-wrap">
<b>{{item.eventHour}}</b><br />{{item.eventText}}
</div>
</div>


And this is what I get on the browser (no custom CSS added here), look at the left margin and the unexisting one on the right:

enter image description here

How can I solve both problems with bottom and right margins?

Thanks in advance

Answer

is there a specific reason you are using collection-repeat? it will limit your styling options.

converting to a simple ng-repeat makes your issues go away http://codepen.io/aaronksaunders/pen/PzZVPr

<ion-content>
  <div class="list">
    <div class="card" ng-repeat="item in items">
      <div class="item item-divider">
        {{item}} HEADER
      </div>
      <div class="item item-text-wrap">
        {{item}} BODY..
      </div>
    </div>
  </div>
</ion-content>