Compressed output in SfTabView

[Jun]

Hi, 

I'm encountered a weird output when using combination of multiple Syncfusion Package.

In the screenshot attached, I had built the UI using 

1. SfListView with <listview:GridLayout SpanCount="2" />

2. and the content is built with the SfTabView which is  between the Image and SfButton

As can be seen from the screenshot attached, it can be seen that when the Name is long (Frozen Chick - Drumstick) and drop to next line,

It will compressed the SfBorder with SfTextInputLayout at the bottom area of the SfTabView. 

Looking forward on the assistance.

Thanks, 

Jun.

Attachment: Bug_cbe76a7.zip

[Sakthivel Palaniyappan]

Hi Jun,

We are currently preparing sample based on your attached images. We will check and update the details on March 10, 2021. We appreciate your patience until then.

Regards,
Sakthivel P. 

[Sakthivel Palaniyappan]

Hi Jun,

Thanks for the patience.

We have analyzed your query and checked the reported issue, but we could not be able to reproduce the reported issue. Please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewGridLayout617919806.zip

Since we are not aware of exact scenario of the issue and layout scenario, could you please check the issue with the attached sample and let us know whether it is reproduced or not? If the issue was not reproduced in this sample, please revert us by modifying the sample based on your application along with replication procedure or provide the sample. This will be helpful for us to investigate further and provide you a better solution at the earliest.

Regards,
Sakthivel P. 

[Jun]

Hi Sakthivel P. 

Really appreciate for your updates.

Thanks a lot for the sample project too.

I manage to reproduce the issue by modifying the following script in the sample project:

ListViewGridLayout > Model > GalleryInfoRepository.cs between the Line 29 and line 47

Just to highlight how the issue happens for my use case and assumption:

When the <Label> / Content at either side of the grid has the difference in height, it will causing the neighbor grid content to be "pushed down" and hidden beneath the grid.

I had attached the modified script together with screenshot where the issue happened and made some note on the screenshots for the reference.

Thanks,

Jun.

Attachment: ModifiedScript_795f0f7a.zip

[Ruba Shanmugam]

Hi Jun,

Thanks for the update.

We would like to inform that, if the content size(height) exceeds the grid size means content will be hidden. You can resolve the reported issue by changing the value of ItemSize property in SfListView based on the content as like below code snippet.


 

<syncfusion:SfListView x:Name="listView"             

         SelectionMode="Multiple"                     

         ItemSize="320"         

         SelectedItems="{Binding SelectedItems}"                    

         ItemSpacing="3"> 

 

  

We have modified sample based on this and please find the sample from below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_ItemSize-1377335717  

Please check with the above and if you are still facing the problem, could you please share the code snippet for SfListview ItemTemplate and SfTabview content that you have used in your application or modify the above sample and also share which platform that you are facing this issue and this will be helpful for us to provide the better solution at earliest.

Regards,
Ruba Shanmugam 

[Jun]

Hi Ruba Shanmugam,

Thanks for pointing out the solution.

Just out of curiosity, is there any possible  method that the height can be dynamically sized it self ?
Because the content should be responsive.
If we fixed the height, there will be some limitation on the UI output.

Was struggling with the output and seeking some suggestion.  

Thanks,

Jun.

[Suganya Sethuraman]

Hi Jun,

Sorry for the inconvenience.

We have analyzed your requirement. We have achieved your requirement by setting AutoFitMode to DynamicHeight as shown in the code snippet below.

Code snippet 

        <syncfusion:SfListView x:Name="listView" 

                               SelectionMode="Multiple"  

                               AutoFitMode="DynamicHeight" 

                               SelectedItems="{Binding SelectedItems}" 

                               ItemSpacing="3"> 

 

Please have the modified sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabView_ItemSize-1377335717-1266862762

Please refer the following UG link for more details,

UG Link: https://help.syncfusion.com/xamarin/listview/item-size-customization#autofit-the-items-based-on-the-content

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.  

[Jun]

Hi Suganya Sethuraman,

Thanks for the solution.

I ran the sample project and got the output. 

AutoFitMode="DynamicHeight" is perfect solution for single horizontal grid item / list item

UG Link: https://help.syncfusion.com/xamarin/listview/item-size-customization#autofit-the-items-based-on-the-content 

I studied the link provided above and I can't find similar guides that has the grid view with 2 grid item per line.

Just one more question, is there any possible solution / suggestion for the grid height responsive to the grid beside it?

because it didn't goes well when the list goes longer in the grid mode with <listview:GridLayout SpanCount="2" />

I attached a screenshot as a reference to point out the current issue i'm facing.

Thanks,

Jun.

Attachment: matching_height_2dabc60a.zip

[Lakshmi Natarajan]

Hi Jun, 

 

Thank you for the update. 

 

We have checked the reported query “is there any possible solution / suggestion for the grid height responsive to the grid beside it?” from our side. We would like to inform you that you can achieve your requirement by providing the RowDefinitions as GridUnitType.Star to occupy the maximum space and load the TabContent to the Grid layout.  

 

Please refer to the following code snippets, 

<syncfusion:SfListView x:Name="listView" 

                            SelectionMode="Multiple"  

                            AutoFitMode="DynamicHeight" 

                            SelectedItems="{Binding SelectedItems}" 

                            ItemSpacing="3"> 

    <syncfusion:SfListView.LayoutManager> 

        <syncfusion:GridLayout SpanCount="2" /> 

    </syncfusion:SfListView.LayoutManager> 

 

    <syncfusion:SfListView.ItemTemplate> 

        <DataTemplate> 

            <Grid RowSpacing="0" ColumnSpacing="0"> 

 

                <Grid ColumnSpacing="0" RowSpacing="0" Opacity="1" Padding="5"> 

                    <Grid.RowDefinitions> 

                        <RowDefinition Height="80"/> 

                        <RowDefinition Height="*"/> 

                    </Grid.RowDefinitions> 

                    <Image Grid.Row="0" 

                x:Name="selectionImage"  

                Aspect="AspectFill" 

                Source="{Binding Image}"/> 

 

                    <tabView:SfTabView Grid.Row="1"  TabHeight="20"  > 

                        <tabView:SfTabItem Title="Call"> 

                            <tabView:SfTabItem.Content> 

                                <Grid Grid.Row="1"> 

                                    <Grid.RowDefinitions> 

                                        <RowDefinition Height="Auto"/> 

                                        <RowDefinition Height="*"/> 

                                        <RowDefinition Height="Auto"/> 

                                        <RowDefinition Height="Auto"/> 

                                        <RowDefinition Height="30"/> 

                                        <RowDefinition Height="30"/> 

                                    </Grid.RowDefinitions> 

                                    <Label Text="{Binding ImageTitle}" /> 

                                    <Label Text="{Binding ImageName}" Grid.Row="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/> 

                                    <Label Text="$650" Grid.Row="2" FontAttributes="Bold" FontSize="Title"/> 

                                    <Label Text="1234" Grid.Row="3"/> 

                                    <border:SfBorder Grid.Row="4" HeightRequest="30" CornerRadius="40"> 

                                        <numeric:SfNumericUpDown VerticalOptions="Start" IsEditable="False" x:Name="numericUpDown" SpinButtonAlignment="Both" Value="5"/> 

                                    </border:SfBorder> 

                                    <buttons:SfButton Grid.Row="5" HeightRequest="30" BackgroundColor="LightGreen" x:Name="button" Text="Button" CornerRadius="3"/> 

                                </Grid> 

                            </tabView:SfTabItem.Content> 

                        </tabView:SfTabItem> 

                        <tabView:SfTabItem Title="Favorites"> 

                            <tabView:SfTabItem.Content> 

                                <Grid BackgroundColor="Green" x:Name="FavoritesGrid" /> 

                            </tabView:SfTabItem.Content> 

                        </tabView:SfTabItem> 

                    </tabView:SfTabView> 

                </Grid> 

            </Grid> 

        </DataTemplate> 

    </syncfusion:SfListView.ItemTemplate> 

</syncfusion:SfListView> 

 

We have attached the modified sample in the following link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabViewSample-761695638 

 

 

#Regarding I can't find similar guides that has the grid view with 2 grid item per line 

We would like to inform you that, in GridLayout, the AutoFitMode measure size of the ListViewItem and take the maximum height as the row height and applies to all other items in a row. We have mentioned the same in our user guidance document. 

 

Please refer to our document from the following link, 

UG link: https://help.syncfusion.com/xamarin/listview/item-size-customization#autofitmode-as-height 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan 

[Jun]

Hi Lakshmi Nataraja, 

Thanks a lot for your assistance. 

Really appreciate your help and I'll test it on my code. 

Thanks, 

Jun

[Lakshmi Natarajan]

Hi Jun, 

 

Thank you for the update. 

 

Please let us know if you need further assistance. 

 

Regards, 

Lakshmi Natarajan