dgiaig dgiaig - 10 days ago 6
AngularJS Question

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.

Answer

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.

Comments