Scroll not updating after expanding/collapsing list items (americium)

ionic-v1
1

Hello guys. I’m building an app that shows a list of items that you can click to expand/collapse.
After the “americium” update it seems that the scroll is not updating and therefore when I expand 1 or more items from the list I am not able to scroll to the bottom (I need to close both items).
Works fine on Chrome but not in the “native” android browser (4.2).
I’m using ion-content overflow-scroll=“true”

Could you please help?

Thanks!

2

It sounds like you have an “accordion”. See this example working in Beta 3.

If that doesn’t help, you’ll need to post a CodePen sample that demonstrates your implementation and problem.

3

I have the same error.
I created some kind of accordion using Card lists, styling cards as the example in Card Showcase docs. I’m using an ng-show directive (ng-show=“f.show”) to show/hide the card item-body when clicking the item-avatar (ng-click=“f.show = !f.show”).

<div class="list card" ng-repeat="f in forms">

<div class="item item-avatar" ng-click="f.show = !f.show">
...
</div>
<div class="item item-body" ng-show="f.show">
...
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
...
</div>

</div>

Error happens when the list is long enough to need a scroll, with the body hidden (i.e. stating f.show in false) everything scrolls perfectly. But when you start expanding card bodies (i.e. setting f.show to true) the scroll breaks and you can no longer scroll down to see the rest of the list.

This is not happening in newest Chrome webviews but I’m getting the error on Android 4.2.2 for example.

Hope someone has found a solution.

Thanks!!!

4

Can you paste an actual CodePen example so we can see this in action?

5

I fixed it by removing the height:100% in .overflow-scroll .scroll. Don’t know if it is the correct way of doing it but for now it is working for me.

6

Thanks Juan,
It also worked for me, but I also removed the transform property.

height: inherit;
transform: none;

7

Hey,

The best way is to use $ionicScrollDelegate.resize().

See http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

2 Likes