CollectionView not visible in scrollview for Ios

[Echoju]

Hello,

I tried different use of "CollectionView" in my vue component. It appears that when I wrap my "CollectionView" with "ScrollView" or "WrapLayout", the CollectionView is not displayed or not visible.

<WrapLayout borderColor="#000" borderWidth="3" width="100%" height="100%" > <CollectionView

            :items="liste_fiche"

            itemIdGenerator="id"
            colWidth="50%"
            rowHeight="100%"
            orientation="horizontal"
        >
            <v-template>
                <GridLayout id="test" rows="*, auto"  class="item">
                    <StackLayout row="1">
                        <Label row="1" :text="item.fiche_titre" class="title" />
                        <Label row="1" :text="item.fiche_titre" class="subtitle" />
                    </StackLayout>
                </GridLayout>
            </v-template>
        </CollectionView>
    </WrapLayout>

Is there any reason for this or any solution ? by the way, it works fine on android. Thanks.

[farfromrefug]

@Echoju the CollectionView does not auto size. You need ot set an height to it.

[Echoju]

Sorry I wasn't clear enough. In the first message, the code works, but when I wrap it with a ScrollView, it doesn't work, even when I put a WrapLayout the CollectionView is not visible.

In this configuration it does'nt work :

<ScrollView> <CollectionView

     :items="liste_fiche"

        itemIdGenerator="id"
        colWidth="50%"
        rowHeight="100%"
        orientation="horizontal"
    > 
        <v-template>
            <GridLayout id="test" rows="*, auto"  class="item">
                <StackLayout row="1">
                    <Label row="1" :text="item.fiche_titre" class="title" />
                    <Label row="1" :text="item.fiche_titre" class="subtitle" />
                </StackLayout>
            </GridLayout>
        </v-template>
    </CollectionView>
</WrapLayout>

</ScrollView>

[farfromrefug]

as I told you you need to set an height to the collectionview

[Echoju]

Hello, Thanks for the answers.

I tried setting an "height", but again my collectionView seems to have issues. Here is the code I used :

    <WrapLayout  borderColor="green"
          borderWidth="3" width="100%" height="150" orientation="horizontal">
            <CollectionView height="150" width="100%"

                :items="liste_fiche"
                borderColor="#000"
          borderWidth="3" 

                itemIdGenerator="id"
                colWidth="50%"
                rowHeight="150"
                orientation="horizontal"
            >
                <v-template>
                    <GridLayout height="120" id="test" rows="*, auto"  class="item" borderColor="#000"
          borderWidth="3" backgroundColor="#ccc" >
                        <StackLayout row="1">
                            <Label borderColor="#000"
          borderWidth="3"  row="1" :text="item.fiche_titre" class="title" />
                            <Label row="1" :text="item.fiche_titre" class="subtitle" />
                        </StackLayout>
                    </GridLayout>     
                </v-template> 
            </CollectionView>
          </WrapLayout>  

      Thanks a lot.

[farfromrefug]

i can't say for sure what's happening. but why do you use a wraplayout? try with another layout

[MrSnoozles]

To help close the issue: A horizontal CollectionView does work in a ScrollView for me. Both on iOS and on Android. (tested with version 4.0.70 of CollectionView) Check if you have any margin or padding set on the CollectionView that might interfere with displaying the content.