Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ion-content and android 4.3 scroll on loadmore

I have a serious problem with ionic and android 4.3.

I have a list of elements dinamically loaded from a rest service. When I execute the loadMore function (with the ion-infinite-scroll directive) the view doesn't resize on devices with android 4.3 version (tested on emulator and samsung gt-i9300), making it impossible to scroll over new elements.

I have tried to call the

$ionicScrollDelegate.resize();

on:

  • success function of $http.get
  • ng-repeat finish custom directive (even with a timeout of 10 seconds)

with no results.

This is my html code:

<ion-content lazy-scroll >

<ion-refresher
  pulling-text="Reload.."
  on-refresh="refresh()" >
</ion-refresher>

<div  class="list card"  ng-repeat="newsItem in newsList" ng-click="goToDetail(newsItem)">

    <div class="item item-image myImage">
      <img image-lazy-src="{{newsItem.image}}" fallback-src="./img/binewsplaceholder.png">
    </div>

    <div class="item">
      <h2 ng-bind="newsItem.title"></h2>

      <categories-in-list categories="newsItem.categories" ></categories-in-list>

      <p><i class="ion-calendar myLabel"></i> {{newsItem.date | date: 'dd MMMM yyyy'}}</p>
      <p class="text-right" ng-show="newsItem.distance && newsItem.distance != 'NaN' ">
        <i class="ion-android-pin myLabel"></i> <span>{{newsItem.distance  | number:0}}  km</span>
      </p>
    </div>
</div>

<ion-infinite-scroll
  immediate-check="false"
  on-infinite="loadMore()"
  ng-if="hasMorePage"
  distance="1%">
</ion-infinite-scroll> 
</ion-content>

Plus, I have the same issue on a "read more" function, that show/hide a div with long text. In that case I found the solution (than removed because of a weak ux) of:

  • Loading the view with the long text displayed
  • wait 5-6 second, then hide it

So.. Is this an issue with android 4.3?

I'm not sure, because in another app everything works fine, with the (more or less) same behavior.

Any suggestion?

Thanks.

like image 462
dgiaig Avatar asked Jan 24 '26 11:01

dgiaig


1 Answers

I have the same issue on my same smartphone. I don't have an idea if this error coming from the Ionic or is a trouble with the device. I found this solution and work fine for me:

Setting overflow-scroll="false" in the ion-content HTML element:

<ion-content overflow-scroll="false">

I hope that has been of helpful.

like image 85
Jonathan Brizio Avatar answered Jan 27 '26 00:01

Jonathan Brizio