Expanding Ionic list - not all items visible when some items expanded

Hi everyone,

I have an app that makes extensive use of Ionic Lists that have items that are expandable so that a title is initially visible, and if the user wants to see more detail they click on the title item and a details item is then expanded - all very much standard workflow I think!?

I have been developing my app using the ionic serve command to show the results in the browser emulator, and then testing the app on android 5.0 & 6.0 and iOS 9.0 phones. The app looks fine on these version phones, however I am running into a scrolling issue on older android phones such as 4.2.2 & 4.3.0.

If a list contain more items than can be shown on a single view then the list needs to scroll in order to see the end of the list. If any of the items are expanded then the end of the list is not visible.

See the following for a test version of what I am trying to do:

<ion-view title="Test List">
    <ion-content class="has-header has-footer" padding="true">
        <ion-list >
            <div class="item item-divider text-center">
                <b>List Header1</b>
            </div>
            <div ng-repeat="item in items">
                <ion-item class="item-stable item-avatar-left" ng-click="expandItem(item)">
                    <b>Title: {{item.title}}</b><br>
                </ion-item>
                <ion-item class="item-accordion item-text-wrap" ng-show="item.expanded">
                    <b>Content:</b> {{item.content}}
                </ion-item>
            </div>
        </ion-list>
        End of list
    </ion-content>

    <ion-footer-bar class="bar bar-footer bar-positive">
        <div class="button-bar">
            <button class="button button-positive">Click1</button>
            <button class="button button-positive">Click2</button>
            <button class="button button-positive">Click3</button>
        </div>
    </ion-footer-bar>

</ion-view>

With the following backing controller:

    .controller('TestCtrl', function ($scope) {
        var items = [];
        for (i = 1; i <= 30; i++) {
            var item = {};
            item.title = "" + i;
            item.content = "" + i; 
            item.expanded = false;
            items.push(item);
        }
        $scope.items = items;
        $scope.expandItem = function (item) {
            item.expanded = !item.expanded;
        };
    })

I have done some research online already and have seen various references to js scrolling not working on older versions of android, but turning the js scrolling off or applying overflow-scroll=“true” hasn’t solved the problem. The min android sdk version for the app is set to “android-minSdkVersion” value=“16”.

Thanx in advance for any suggestions as how to resolve,

Regards
Chris