Collection-Repeat Item Margin

ionic-v1
1

Wondering if anyone knows of a trick to allow top and bottom margin between collection-repeat items. Margin works on the sides, but the gap between items does not change.

1 Like
2

Hi,

I am using collection-repeat heavily in my app with different sizes in different template. For each template I have created one custom css which matches my directive item height. I spent quite a lot of time to figure out how it work properly and tested with different sizes. I hope this helps and save your time.

My css and html looks like below for one of the template. Please note, I am using custom css for item and item-content classes because my list can delete items. But if your list does not require deletion or move items than you do not need to add custom css for item-content.

<ion-list show-delete="shouldShowDelete" show-reorder="shouldShowMove">
	<ion-item class="item item-icon-right my-item my-item-content"
			  collection-repeat="item in items track by item.id"
			  collection-item-width="'100%'"
			  collection-item-height="60"
			  ng-style="'height:60px'"
			  ng-click="itemClick($index)">
		<h4 class="item-index">{{$index+1}}.</h4>
		<ion-delete-button ng-if="canDelete"
						   class="ion-minus-circled"
						   ng-class="{ 'ng\-hide': !shouldShowDelete }"
						   ng-click="deleteItem($index)"
						   stop-event='click'></ion-delete-button>
		<img class="sm-img" ng-cache ng-src="{{ imageUrl }}" ng-click="imageClick(id)" stop-event='click' />
		<h3><strong>{{item.title}}</strong></h3>
		<h4>{{item.subTitle}}</h4>
		<i class="icon ion-ios7-more-outline" ng-click="showOptions($index)" stop-event='click'></i>
	</ion-item>
</ion-list>

.list .my-item.item {
	height: 60px;
	left: 0;
	right: 0;
	padding-top: 10px;
	padding-bottom: 5px;
}
.my-item-content .item-content {
	position: relative;
	z-index: 2;
	padding: 0 0 5px 10px;
	border: none;
}
.item .sm-img {
	height: 40px;
	width: 40px;
	float: left;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 10px;
}
.item .item-index {
	float: left;
	width: 32px;
	margin-top: 15px;
	margin-right: 10px;
	-webkit-align-self: center;
	-moz-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}
1 Like
3

Have you tried this with the nightly builds? Worked in 14 for me

4

I am not using nightly build. I am using 1.3.11.

5

I have the same problem with Ionic 1.3.2. No matter what tiop/bottom margin I set on ion-item it doesn’t work. Previously used ng-repeat and it worked fine.