Receycled collectionview cells do not get correct height applied for new template

[cjohn001]

Which platform(s) does your issue occur on?

• iOS
• emulator or device. What type of device? emulator and device (iPhone 11) and different emulators

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

• CLI: 8.0.2-next-08-13-2021-1128363962
• Cross-platform modules: "@nativescript/core": "~8.1.0-alpha.1",
• Runtime(s):"@nativescript/ios": "JSC",
• Plugin(s): "@nativescript-community/ui-collectionview": "~4.0.42",

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

I have a ui collection view with with templates of different height, see below. In the beginning, the cell display correctly. But it seems when cells are recycled, they do not get the correct height applied anymore. See attached image, rows below "Mittagessen"

<ng-template let-item="item" cvTemplateKey="footerTemplate">
                    <GridLayout rows="25" columns="auto,*,auto,*,auto,*,auto" class="bottom-stat-footer">

                        <Label col="0" [text]="item.fatsText" class="h5 fat-color p-x-0 bold-text"
                            horizontalAlignment="right" verticalAlignment="center"></Label>
                        <Label col="2" [text]="item.proteinsText" class="h5 protein-color p-x-0 bold-text"
                            horizontalAlignment="left" verticalAlignment="center"></Label>
                        <Label col="4" [text]="item.fiberText" horizontalAlignment="center" verticalAlignment="center"
                            class="h5 fiber-color p-x-0 bold-text"></Label>
                        <Label col="6" [text]="item.netCarbsText" horizontalAlignment="center"
                            verticalAlignment="center" class="h5 net-carb-color p-x-0 bold-text"></Label>

                    </GridLayout>
                </ng-template>

                <ng-template let-item="item" cvTemplateKey="groupTemplate">
                    <GridLayout rows="45" columns="*,auto" class="group-header">
                        <Label row="0" col="0" [text]="item.categoryName" class="h3-heading p-l-15"
                            verticalAlignment="center"></Label>
                        <Label row="0" col="1" [text]="item.mealEnergyText" class="h3-heading p-r-15"
                            verticalAlignment="center"></Label>
                    </GridLayout>
                </ng-template>

[farfromrefug]

@cjohn001 i dont really understand what i should see. I dont see the limit of the cells and where it fails. You need to give more details

[cjohn001]

Good Morning @farfromrefug, ok, sorry I try to explain in more detail. In the following I attached two images. The first one shows a correct layout in order to explain what is on the screen. The green marked part of the screen is not part of uicollectionview. In the collectionview, which is used by the remaining part of the screen, there are three different types of ng-template used.

1. Group header with height=45. I marked only a single one in the view in red. It is the topmost, with the white background and green text.

2. A normal nutrition item, which also has height=45. Example is also marked in red, second topmost. These all have a transparent background.

3. A footer item with height=25. I marked two examples in the image below. Footer items can display nutrition information, if the group they belong to, contain nutrition items, or they can be empty. For both cases I marked an example in red.

Alright, let's look now at how things look like if cells get reused (broken layout). In the image below, I marked the extent of the reused cells.

The topmost red cell shows again a footer item. It should have a height=25. It seems that the underlaying reused cell has height=45, therefore the content of the footer item is shifted to the top and the space below is transparent. If the underlaying cell would have the correct height of 25 for the footer template, then this empty space should not exist.

The second red marked block shows an example were things break the other way around. Here a normal nutrition item with height=45 gets assigned an underlaying cell which previously was created for a footer item (height=25). Part of the new nutrition item content therefore reaches into the cell above.

I hope this helps to understand the problem better. To me it seems like the cells, when they are reused are not selected depending on for which ng-template type they were created for. Maybe this is the intended behavior. But in this case they should recompute their height based on the content of the new ng-template which is to be displayed in them.

Does my explanation make the situation more clear to you? Thanks for taking the time to look into it!

[farfromrefug]

@cjohn001 ok i understand it now, thanks. I might have an idea on what s happening. I will try and and release a version which might fix it. If not i will need a reproducible example

[cjohn001]

@farfromrefug: Ok thanks!

[farfromrefug]

@cjohn001 you can try 4.0.43

[cjohn001]

@farfromrefug : Thank you very much. It works great!