I am facing an issue with a scrollable view in my project. I have a list of items that should be scrollable, but for some reason it is not scrolling as expected. The structure involves a vertical stack layout wrapped in a scrollview, and inside the stacklayout there is a gridlayout populated using a v-for loop.
Below is the code snippet causing the problem:
<template>
<ScrollView android:clipToPadding="false" orientation="vertical" style="width:100%; height:100%; background-color:rgb(245,245,245);">
<StackLayout orientation="horizontal" style="width:100%; height:100%; padding:10px;">
<GridLayout columns="auto,*" rows="auto,auto,auto" v-for="comment in 6" :key="comment" style="width:100%; height:auto; margin:5px 0px; padding:20px; background-color:white;" >
<Image row="0" col="0" src="~/assets/images/menu-2.jpg" loadMode="async" stretch="fill" style="width:55px; height:55px; border-radius:50%; margin:0px 20px 0px 0px;"></Image>
<StackLayout row="0" col="1" orientation="horizontal" style="width:100%; height:20px; ">
<Label :text="'fa-star' | fonticon" class="fa" v-for="star in 5" fontSize="12" :key="star" style="color:yellow; vertical-align:center;"></Label>
<Label text="hace 3 horas" class="fa c_grey" style="margin:0px 0px 0px 10px; vertcal-align:center;"></Label>
</StackLayout>
<Label row="1" col="1" class="c_normal fs_smaller" textWrap="true" style="margin:0;" lineHeight="0" text="I have not tried iOS yet. This may not be the best approach either. I am attempting to make a crop-box. In the view the user will see an image under the clip-path that they will position. I am not actually cropping the image. Any suggestions are appreciated. Thanks!"></Label>
</GridLayout>
</StackLayout>
</ScrollView>
</template>