Making the ion-list-item with smaller margins for content


#1

Im using the ion-list directive with the ng-repeat to display my array of data as a list of items.
Each element contains an image & text, as follows:

                 <ion-list>
                     <ion-item class="item item-text-wrap" ng-repeat="coin in coins">
                         <div class="item item-text-wrap">
                             <table>
                                 <tr>
                                     <td>
                                         <img src="{{coin.IconLink}}" class="coin-icon"/>
                                     </td>
                                     <td>
                                         {{coin.Name}}
                                     </td>
                                 </tr>
                             </table>
                         </div>
                     </ion-item>
                  </ion-list>

But each item is displayed in a much larger box surrounding it. its about 30-40px of margin to each side.
What class controls that and how can I make it smaller?


#2

I would start with the item class


#3

I managed to reduce it a little bit, by adding a padding-top & padding-bottom equals to 0.
But there is still some space between list items, Im not sure where its coming from.
I assume the spacing of on the width is from a padding applied to the entire document, but its not too big so its fine.
but the y-axis distance is still large.
In case anyone finds out what causes it, I’d like to know


#4

Experiencing this too.
Looking at //code.ionicframework.com/nightly/css/ionic.css:
class .item refineds padding: 16px;
This is quite a big padding (BTW I humbly ask if em could be used in place of px)

In my case the link is it self in a <div> which also inherits from this 16px padding, thus each item is separated from the next by 32 px.
Did I missed something ? or the only way is overwritting locally the .item css ?