Padding issue with ion-refresher

1

I created an app based on Tabs and added an ion-refresher to one of the views:

<ion-view title="Friends">
  <ion-content>

	<ion-refresher
		   pulling-text="Pull to refresh..."
		   on-refresh="doRefresh()">
	</ion-refresher>


	<ion-list type="list-inset">
	  <ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}">
		{{friend.name}}
	  </ion-item>
	</ion-list>
  </ion-content>
</ion-view>

While it works perfect, the Refresher UI is ‘above’ the header:

Any suggestions?

2

So, adding class=“padding” to the ion-content for this tab fixed it. The other tabs already had it. Since the original list content was NOT inset, it made sense to remove the padding. I made the list inset in my demo.