Dynamic height does not work for sfListView

[Ian Maurer]

I'm using Xamarin forms sfListView

the rows overlaps its content like this on ios.

sfListView version : 17.4.0.55

 Xamarin.Forms verion 4.5.0.356

 

 I have attached zip below.

and here is my code for listView

<syncfusionList:SfListView

                                    x:Name="listViewAppearance"

                                    AutomationId="listViewAppearance"                                    

                                    Margin="10"

                                    Padding="10"

                                    ItemsSource="{Binding AppearanceCollection}"

                                    SelectionMode="Single"

                                    AutoFitMode="DynamicHeight"

                                    VerticalOptions="FillAndExpand"

                                    HorizontalOptions="CenterAndExpand"

                                    SelectionChangedCommand="{Binding AppearanceListViewSelectionChangedCommand}"

                                    SelectionChangedCommandParameter="{x:Reference listViewAppearance}"

                                    IsClippedToBounds="True">

                                    <syncfusionList:SfListView.ItemTemplate>

                                        <DataTemplate>

                                            <ViewCell >

                                                <Grid

                                                    AutomationId="{Binding AppearanceData.Id,StringFormat='itmAppearance{0}'}"

                                                    Padding="5"

                                                    HorizontalOptions="FillAndExpand"

                                                    ColumnSpacing="10">

                                                    <Grid.RowDefinitions>

                                                        <RowDefinition Height="Auto"/>

                                                        <RowDefinition Height="Auto"/>

                                                    </Grid.RowDefinitions>

                                                    <Grid.ColumnDefinitions>

                                                        <ColumnDefinition Width="Auto"/>

                                                        <ColumnDefinition Width="Auto"/>

                                                    </Grid.ColumnDefinitions>

                                                    <Iconize:IconLabel

                                                        Grid.Column="0"

                                                        Text="far-square" 

                                                        TextColor="White"

                                                        FontAttributes="Bold"

                                                        FontSize="20"/>

                                                    <Label

                                                        Grid.Row="0" Grid.RowSpan="2"

                                                        Grid.Column="1"

                                                        Text="{Binding AppearanceData.Description,StringFormat='{0} '}" 

                                                        Style="{DynamicResource LabelStyle}"

                                                        TextColor="White"

                                                        FontAttributes="Bold"

                                                        FontSize="20"

                                                        LineBreakMode="WordWrap"/>

                                                </Grid>

                                            </ViewCell>

                                        </DataTemplate>

                                    </syncfusionList:SfListView.ItemTemplate>

                                    <syncfusionList:SfListView.SelectedItemTemplate>

                                        <DataTemplate>

                                            <Grid

                                                AutomationId="{Binding AppearanceData.Id,StringFormat='itmAppearance{0}'}"

                                                Padding="5"

                                                HorizontalOptions="FillAndExpand"

                                                ColumnSpacing="10">

                                                <Grid.RowDefinitions>

                                                    <RowDefinition Height="Auto"/>

                                                    <RowDefinition Height="Auto"/>

                                                </Grid.RowDefinitions>

                                                <Grid.ColumnDefinitions>

                                                    <ColumnDefinition Width="Auto"/>

                                                    <ColumnDefinition Width="*"/>

                                                </Grid.ColumnDefinitions>

                                                <Iconize:IconLabel

                                                    Grid.Column="0"

                                                    Text="far-check-square" 

                                                    TextColor="White"

                                                    FontAttributes="Bold"

                                                    FontSize="20"/>

                                                <Label

                                                    Grid.Row="0" Grid.RowSpan="2"

                                                    Grid.Column="1"

                                                    Text="{Binding AppearanceData.Description,StringFormat='{0} '}" 

                                                    Style="{DynamicResource LabelStyle}"

                                                    TextColor="White"

                                                    FontAttributes="Bold"

                                                    FontSize="20"

                                                    LineBreakMode="WordWrap"/>

                                            </Grid>

                                        </DataTemplate>

                                    </syncfusionList:SfListView.SelectedItemTemplate>

                                </syncfusionList:SfListView>

Attachment: Image_from_iOS_b2fe8e9d.zip

[Chandrasekar Sampathkumar]

Hi Buddhima, 

 

Thank you for using Syncfusion products. 

 

We have checked the reported query from our end. We would like to let you know that we are able to reproduce the issue from our end. We are currently validating the reported issue and provide you further details on March 18, 2020. We appreciate your patience until then. 

 

Regards, 

Chandrasekar Sampathkumar 

 

[Ian Maurer]

I could solve it by include the Lable and checkbox in a Stack layout and set the orientation to Horizontal.

seems the label height is not auto sizing when it is inside a Grid template in a sflistview.

I'm waiting for the update.

[Chandrasekar Sampathkumar]

Hi Buddhima, 

 

Thank you for the update. 

 

As promised in our previous update, we will share further details on March 18, 2020. We appreciate your patience until then. 

 

Regards, 

Chandrasekar Sampathkumar 

 

[Chandrasekar Sampathkumar]

Hi Buddhima, 

 

Thank you for your patience. 

 

We would like to inform you that the reported issue has been fixed in SfListview and currently it is in testing phase. Once completely tested, we will provide patch on March 20, 2020. We will appreciate your patience until then. 

 

Regards, 

Chandrasekar Sampathkumar 

[Ian Maurer]

@Chandrasekar Sampathkumar

I found the same issue in sfTreeView too when the items are inside a grid view. 

So may I post a new issue ? or can we continue it here ?

I have attached the screenshot here.

Attachment: 20200319_100817_f92e5bd8.zip

[Chandrasekar Sampathkumar]

Hi Buddhima, 

 

Thank you for your patience. 

 

On further analysis on the code snippet provided the issue can be fixed in the sample level itself, you have defined two rows with Auto as height but the second row does not has element and caused the reported crop issue. So, we suggest you to remove grid row definitions and set CheckBox VerticalOptions to Start to overcome this issue. Please refer the following code snippet for further reference, 

 

<syncfusionList:SfListView.ItemTemplate> 

    <DataTemplate> 

        <ViewCell > 

            <Grid 

                AutomationId="{Binding  

                              AppearanceData.Id,StringFormat='itmAppearance{0}'}"                 

                HorizontalOptions="FillAndExpand" 

                ColumnSpacing="10"> 

                <Grid.ColumnDefinitions> 

                    <ColumnDefinition Width="Auto"/> 

                    <ColumnDefinition Width="Auto"/> 

                </Grid.ColumnDefinitions> 

                <Iconize:IconLabel 

                    Grid.Column="0" 

                    Text="far-square"  

                    TextColor="White" 

                    FontAttributes="Bold" 

                    FontSize="20" VerticalOptions="Start"/>                 

                <Label 

                    Grid.Column="1" 

                    Text="{Binding BookName}"  

                    TextColor="White" 

                    FontAttributes="Bold" 

                    FontSize="20" 

                    LineBreakMode="WordWrap"/> 

            </Grid> 

        </ViewCell> 

    </DataTemplate> 

</syncfusionList:SfListView.ItemTemplate> 

 

We hope this helps. Please let us know if you need further assistance. 

 

#Regarding SfTreeView issue 

Please create a new incident for this. 

 

Regards, 

Chandrasekar Sampathkumar