Nativescript-ui-feedback: RadListView, ListViewGridLayout and tkListViewHeader: the header goes over the grid

[demetrio812]

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

Yes

Tell us about the problem

I have a 2-column grid of image tiles, at the top and bottom I have a longer tile that occupy the entire size.
The grid tiles height is calculated as they have to occupy half of the screen and they have to be squared. The same height should be applied to the header and footer tiles.

It worked very well in iOS using NS 3.X but now I've switched to 4 and the header goes over the grid.
It looks like the height of the header is applied but the header doesn't push the grid down but stays over it.

It's important to notice that if I hardcode the height in the header template content (instead of using height="{{midItemHeight}}") it works (but that's not really what I need as I don't know the height in advance because it depends on the screen width).

Which platform(s) does your issue occur on?

iOS only, on Android it's fine

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

"nativescript-ui-listview": "^3.5.5"

tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 4.0.0 version and is up to date.
✔ Component tns-core-modules has 4.0.0 version and is up to date.
✔ Component tns-android has 4.0.1 version and is up to date.
✔ Component tns-ios has 4.0.1 version and is up to date.

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application (tab based)
2. Navigate to the tab with the UI Code shared below

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

<GridLayout rows="*" height="100%" class="page list-container" paddingTop="10dp">
    <RadListView row="0" [items]="appStateService.categories$ | async" class="ch-list-view" *ngIf="appStateService.categoriesLoaded">
        <ListViewGridLayout tkListViewLayout scrollDirection="Vertical" ios:itemHeight="{{midItemHeight}}" spanCount="2"></ListViewGridLayout>
        <ng-template tkListItemTemplate let-item="item" let-odd="odd">
            <StackLayout orientation="vertical" class="ch-list-view-item" [ngClass]="{'mid-tile-left': !odd, 'mid-tile-right': odd}"
                backgroundColor="#4A4A4A">
                <app-tile1 class="mid-tile" [backgroundImageUrl]="item.profileImage | imageUrl:300" [centerText]="item.name" (tap)="goToCategoryDetail(item)"></app-tile1>
            </StackLayout>
        </ng-template>
        <ng-template tkListViewHeader>
            <StackLayout orientation="vertical" backgroundColor="#4A4A4A" height="{{midItemHeight}}">
                <app-tile1 row="0" centerText="Around me" class="top-tile" backgroundImageUrl="res://around_me" (tap)="goToAroundMe()"></app-tile1>
            </StackLayout>
        </ng-template>
        <ng-template tkListViewFooter>
            <StackLayout orientation="vertical" backgroundColor="#4A4A4A" height="{{midItemHeight}}">
                <app-tile1 row="0" centerText="Cities" class="bottom-tile" backgroundImageUrl="res://cities" (tap)="goToCities()"></app-tile1>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

Is there any workaround that you may know? I may have to go back to NS 3.x if it doesn't work.

Thanks!

Dem

[demetrio812]

Hello again,
I'm doing more tests and I've just noticed that it's not a problem related to NS3 or 4, it's something that changed from version 3.5.2 to version 3.5.4 (3.5.3 doesn't run for me). 3.5.5 is still having the same problem.

Going back to version 3.5.2 would make it work properly.

Hope this help, thanks!

Dem

[NickIliev]

@demetrio812 can your try using height="100%.Apart from that, can you clarify how is your midItemHeight calculated (perhaps you can create a Playground demo)

[demetrio812]

@NickIliev I didn't forget about it, going to send a repro playground soon

[exeleon]

@NickIliev @demetrio812 I can confirm the same issue in iOS, in Android works properly. I am using RadListView version 3.5.8. It would be great if this fix could be included in the next 4.2 millestone.

[demetrio812]

Hello,
I've created a Playground project to reproduce the problem: https://play.nativescript.org/?template=play-ng&id=ao72eK&v=3

Here the video of the problem: https://www.dropbox.com/s/4d6le0kw9xt6tgc/radlistview_problem.mp4?dl=0

I couldn't make it work in playground, but on my project, if I go back to 3.5.2 it works properly.

Let me know if you need more information

Thanks,
Dem

[demetrio812]

@NickIliev any news? can you reproduce it using the playground? Thanks

[NickIliev]

@demetrio812 indeed the behavior is unexpected and different from the android - marking this one as a bug and I will post any additional info here once we have an idea of what is going on.

[NickIliev]

@exeleon @demetrio812 with the latest version of nativescript-ui-listview (3.6.0) we have introduced a method of RadListView called updateHeaderFooter. @demetrio812 Try to call the method right after the calculations are made in your custom calculateMidItemHeight (before that update the version of nativescript-ui-listview to the latest)

calculateMidItemHeight() {
    let listContainerPaddingDp = 10;
    let availableWidthDp = HomeComponent.widthDip;
    this.midItemHeight = ((availableWidthDp / 2) - (listContainerPaddingDp * 3));


    this.listview.updateHeaderFooter(); // where this.istview is refernce to your RadListView

    // console.log('calculated MidItemHeight = ' + this.midItemHeight);
}

I've tested your application with the updated nativescript-ui-listview and the method and everything works as expected on my side.

[demetrio812]

Hello @NickIliev from a first check I don't even have to call "updateHeaderFooter" and it works now, will get back if I find something related to it, thanks!