Nativescript-ui-feedback: iOS RadListView: header sizing issue when using visibility binding and an async datasource

[felixkrautschuk]

Did you verify this is a real problem by searching the NativeScript Forum?

_Yes_

Tell us about the problem

When having an element within the RadListView header template whose visibility can switch from 'collapse' to 'visible' and when the list-data is set asynchronously, the header template is not sized correctly.
In this case the first list-item overlaps the header view. When you scroll down and up again, you see the header view is overlapping the first list item.
When you change the orientation of the device, everything is visualized correctly.

Please note this is not happening

• on Android, only on iOS
• when using a static datasource (no http-request, no setTimeout-funcionality,...)
• when using 'hidden' instead of 'collapse' within the visibility binding (this is not an option for us, because there would be too much visible 'empty' space in our real app where the actual header contains more items than this sample.)

After data is loaded:

After you scroll down and up again:

After you switched orientation to landscape and back to portrait (the excpected output):

Which platform(s) does your issue occur on?

_iOS_

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI version: nativescript-ui-listview 3.5.11
• CLI: 4.1.2
• Cross-platform modules: 4.1.0
• Runtime(s): tns-ios 4.1.1

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

RLVIOSHeaderIssue.zip

[felixkrautschuk]

I updated all dependencies in my sample project, but this issue still occurs on iOS.

[DimitarTodorov]

Hi, @felix-idf
In order to eliminate the undesired behaviour there is a new method that should be called on dataLoad - upateHeaderFooter(), which is added in the listview component.
Here is a code snipped from your sample app, where the method must be called:
main-page.js

exports.onLoaded = function () {
    listview = page.getViewById('listview');
    vmModule.vmMain.loadData().then(function () {
        listview.updateHeaderFooter();
    });
};

Regards