Ionic-list scroll issue on adding new items in the list

ionic-v1
1

Hi,

I am new to angular and ionic and facing a weird scroll issue with . The list seem to hang in the middle and doesn’t scroll up.

My code example has a ion-list containing a item “inline search” which does an autocomplete in production. For the demo I’ve used a hard coded list of fruit. Once you type in the search input, the same ion-list is extended with items (using ng-show if search length > 0).

Try to search something and click to select fruits. Select atleast 5-6 fruits.

Note: I’ve a feeling that the weird issue is because Search items are appended at the end of the ion-list and then removed.

Anyone, who can give a pointer as to what could be the problem?

2

Call $ionicScrollDelegate.resize() when you click on the search results.

2 Likes
3

Adding $ionicScrollDelegate.resize() did not solve the problem.

Every time I select or delete or add new search items to the list, I call the resize method like this:

$scope.selectedfruit = function (item, index) {

    $scope.user.fruits.push({ 'name':item, 'strength':70 });
    $ionicScrollDelegate.resize();
    console.log('seleced fruit, resizing');
    //check if the fruits is already there.
};

Codepen was updated with the resize code: http://codepen.io/amitksaini/pen/wmGef

Any other pointers?

4

How do you add/delete items in the list without getting caught up in this weird scroll issue?

Any advice?

5

Hey there.

So I’ll be honest, I’m a little stumped here. I’m not sure what’s causing that issue since calling .resize() should fix it.

Whats even more odd is that if you comment out the resize, it still happens.

Hmm, maybe rethink the ui?

6

I have the same problem - different UI. I am fairly convinced there is an issue with the scrolling in ionic. There is no problem when removing items from the scroll-view, but when adding. After adding an item, the scroll-view is offset so that I can’t scroll up to the top of the view, but I can scroll down a lot further than necessary (empty space).

EDIT:
I found the problem shortly after writing this note, which resulted in a new issue on github:

7

Got the very same problem, I can scroll far to the bottom without having any content and I can’t scroll to the very top of my view, where there is content. Seems that the ion-content element is resized after adding an element to the list and rendering it.

Please tell me you’ve got the solution !