Weird pull to refresh — sticks out, rotates text along with the arrow

ionic-v1
1

Hey guys,

I was wondering if this was the intended behavior. I have an ion-refresher added like this:

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

Every time I pull down, when the refresh element reaches the point where it should rotate and point upwards, both the text and the icon rotate (separately).

Also, the text and the arrow stick out from under the top bar delicately.

I have a feeling I messed something up, any ideas?

EDIT: The elements are structured like this (please ignore the $root in there):

<ion-view title="Your things">
  <ion-content>

<ion-refresher
  on-refresh="doRefresh()">
</ion-refresher>


<div class="card" ng-repeat="thing in $root.things">
  <div class="item item-divider">

... snip ...

EDIT 2:

I’ve noticed this doesn’t happen when I have an ion-list after the refresher. Is there something I’m missing? :wink:

2

I just figured this out. I needed to wrap what was after ion-refresher in an ion-pane element.

Thanks, teddy bear.

3

Hey @maligree, glad to see you figured this out, but you should be wrapping your cards in a ion-list or even a div with a class of list. This will take care of some positioning and keep things and nice and semantic-like.

Wrapping the ion-refresher isn’t the intended or recommended markup