CODEWITHSUNDEEP
angularjsionic-framework
jhlosin
jhlosin

Reputation: 575

ion-scroll scroll to the bottom won't show all the items at the bottom

this works but it can't scroll down to the very bottom. I have home button at the bottom and and few items are blocked by it and won't scroll up. home button is in footer in the main page and not on the same controller. how do I make sure I see all picture at the bottom. appreciated for any advice.

<ion-scroll direction='y' zooming='true' style="height: 1024px">
    <div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
      <a class="item item-thumbnail-left" href="#">
        <img src="sourceURL</p>
      </a>
    </div>
  </ion-scroll>

Upvotes: 2

Views: 3111

Answers (1)

Nam Pham
Nam Pham

Reputation: 1224

I think the better way is use <ion-content>, this was designed for scrolling as well. But it has some class that help us detect the bottom and top margin like has-footer or has-sub-footer. This won't need to specify an exact height value by style attribute too.

For <ion-content> you can do like this:

<ion-content direction="y" class="has-footer" <!-- has-bouncing="true" --> >
    <div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
       <a class="item item-thumbnail-left" href="#">
          <img src="sourceURL"</p>
       </a>
    </div>
</ion-content>

Like the example above, I added has-footer class, it will automatically push the main content up for you, all the content will be shown as you expected. You can also put the has-bouncing="true" attribute like <ion-scroll>

Upvotes: 5

Related Questions