Ionic list-item bottom margin

Question

I have a ion-list, that has a opened state which changes the class to a different background color:

.opened .item-content{
   background-color: #c4c4c4 !important;
}

The result shows a small white margin below the list item. Is there a way to remove it? (Note, I also use option-buttons and their colors in that small margin when I am swiping the item, regardless of the background color of the item)

Ionic Play

Answer 1

Seems like an issue with collection-repeat. Using ng-repeat solves the issue.

http://play.ionic.io/app/f1d2eb83ee03

<ion-item ng-class="{'opened item-content':item.state}" class="item item-thumbnail-left" ng-repeat="item in news" href="#/feed/{{item.source}}/{{item.link}}/{{item.title}}" ng-click="openNews(item, 'open')">

Answer 2

The small white space is caused by the parent element's background color. You can override it with same background color:

.opened.item {
  background-color: #c4c4c4;
}

Set item's height to increment by 1px for covering up the space.

.item {
  height: 101px;
}

Updated Ionic