1. Home
  2. Forum
  3. .NET MAUI
  4. SFListView not handling Height of Items correctly

SFListView not handling Height of Items correctly

Hello,

on the way of transfering our Xamarin.Forms app to .NET MAUI we found another problem or maybe a bug in your listview.

The items in their designated height are not correctly rendered when the main text part of the itemTemplate is completely in captial letters.

You will see the difference of the behavior in the second and third item in the picture showed below.

scrcpy_IHQacNyFng.png


In the landscape format everything is ok.


scrcpy_feLdBjDJom.png


The sample project is attached with your MAUI SFListview nuget package version 22.1.39.

Best regards

Christian Kurz


Attachment: SFListViewDynamicHeightBug_941eb759.zip

18 Replies
RM RiyasHameed MohamedAbdulKhader Syncfusion Team July 24, 2023 12:39 PM UTC

Hi Christian Kurz,
We have checked your reported query and run the sample you provided, but we were unable to reproduce the issue. Therefore, we suspect that the elements inside the Itemplate are not being measured properly. For further investigation, we have attached a sample. In this sample, we set the background for elements inside the template to identify which element’s height is not set properly.
We request you run the attached sample in your side and confirm us whether the reported issue occurs or not. If issue occurs, please provide us with the screenshot of attached sample. This will help us investigate your query further.
Regards,
Riyas Hameed M


Attachment: SFListViewDynamicHeightBug_8b8ea99a.zip

CK Christian Kurz July 25, 2023 12:03 PM UTC

Hello Riyas,

thank you for your reply.

I downloaded your project and I have run it on our Pixel 6 and on our Samsung A13 Android phones.

The problem is still avaiable on the Pixel, but not on the Samsung.

I think the defined Android font and display size in the settings has an inpact on it.

I attached now screenshots of both phones of the sample app and the font settings of android. I hope this will help you to get the issue.

scrcpy_25lIpMjHH5.png

scrcpy_vpUhMvM3yB.png

scrcpy_X1GmnFU075.png

scrcpy_xbEGStTNB5.png

Best regards

Christian Kurz


RM RiyasHameed MohamedAbdulKhader Syncfusion Team July 26, 2023 01:25 PM UTC

Christian Kurz,

We rechecked your reported query, and we were able to reproduce the issue on Pixel 6 using the display settings you provided. Additionally, we attempted to replicate the issue on Pixel 5, but it did not occur. We suspect that the label content is not measured properly on Pixel 6 device. As a workaround, we suggest using a custom label to properly measure its content. For your convenience, we have attached a sample code.I hope this information is helpful! Please let me know if you have any further questions or if there is anything else I can assist you with.



Attachment: SFListViewDynamicHeightBug_20f09487.zip

CK Christian Kurz July 27, 2023 08:11 AM UTC

Hello Ryas,

thank you for your reply. I appreciate that you could reproduce my problem now.

I tested your workaround with the custom label and it works on our Pixel 6A phone.

We in our team don't like the idea to use this workaround in any of our several Syncfusion listviews to prevent the upcoming of this issue.

Will be there a patch from your company to fix this problem in a future release?

Best regards

Christian Kurz


RM RiyasHameed MohamedAbdulKhader Syncfusion Team July 28, 2023 01:44 PM UTC

Christian Kurz,

After re-evaluating your reported query, it appears that the grid placed inside the item template is causing improper height calculations after measuring the grid and arranging the ListViewItems using the measured height, which leads to an incorrect height. We are currently working on reproducing the issue at the framework level to better understand its root cause.

As a workaround, you can try either setting a Label.Maxlines or workaround shared in our last update.

We appreciate your understanding and patience as we continue to validate the query. We will provide further details and updates as soon as possible.


IV Ivan August 9, 2023 09:20 PM UTC

Following up on this thread. I am having the same issue on iOS when adding a SfListView with DynamicHeight inside a SfTabItem.






DV Diwakar Venkatesan Syncfusion Team August 10, 2023 02:03 PM UTC

Hi Ivan,

We would like to inform you that we have already logged report internally for this dynamic height issue when using a label inside the item template on the Android platform.

Could you please provide us with your item template code snippet, and the device you are running it on? This information will allow us to validate the issue more effectively and provide you with a better response.

Regards,
Diwakar V


IV Ivan August 10, 2023 08:37 PM UTC

Hi,


Please see the project attached with an example of  dynamic Height is not working on iOS


Attachment: SFListViewDynamicHeightBug_f052e42b.zip

DV Diwakar Venkatesan Syncfusion Team August 11, 2023 02:26 PM UTC

Ivan,

We have analyzed the attached sample. It seems like the issue is caused by the horizontal StackLayout. Since the label is inside a horizontal StackLayout, it arranges horizontally, which is the expected behavior of a horizontal StackLayout. We tested it with a simple sample, and it can be reproduced. We suggest using a vertical StackLayout to overcome this issue. Please refer the attached code snippet below, 

  <VerticalStackLayout Grid.Column="1" HorizontalOptions="FillAndExpand">

      <Label Text="{Binding MedicineName}" BackgroundColor="BlanchedAlmond"

             LineBreakMode="WordWrap" FontAttributes="Bold"/>

      <!-- Wordwrap not working here -->

      <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

          <Label Text="{Binding DosageString}" BackgroundColor="Beige"

             LineBreakMode="WordWrap"/>

      </StackLayout>

      <!-- Third and fourth line not being displayed -->

      <Label Text="Third line NOT BEING DISPLAYED" TextColor="Red"/>

      <Label Text="Fourth line NOT BEING DISPLAYED" TextColor="Red"/>

  </VerticalStackLayout>



IV Ivan August 14, 2023 03:48 PM UTC

Hi Diwakar,


Thanks for your last response. That seems to fix the word-wrapping issue inside a Layout but the height of each item is still not displaying correctly. Please see image attached


iPhone 14 Pro Max iOS 16.2


Screen Shot 2023-08-14 at 11.45.14 AM.png

 


IV Ivan August 14, 2023 05:43 PM UTC

Hi Diwakar,


I think I found the solution and I'd like to share it in case it helps others. 

My <DataTemplate> had a <Grid ColumnDefinitions="Auto, *"> I changed the "Auto" to 50, and then everything was rendered correctly, and height was adjusted accordingly.

This does seem like a bug though


Screen Shot 2023-08-14 at 1.42.41 PM.png


RM RiyasHameed MohamedAbdulKhader Syncfusion Team August 15, 2023 08:07 AM UTC

Ivan,
We are glad that you found the solution and thank you for sharing the solution. we have already have the internal report for the same and we will let you know once it is included.


DA Dan August 17, 2023 03:34 PM UTC

Hi,


I am also seeing the same issue using the standard CollectionView....guess its a MAUI bug? Not using Auto on the grid as mentioned above removes the height issue.

Finding these bugs in MAUI makes progress very slow...I hope .NET 8 has a lot of fixes!


RM RiyasHameed MohamedAbdulKhader Syncfusion Team August 18, 2023 01:19 PM UTC

Hi Dan,

We also hope that .NET will come with numerous bug fixes. Moreover, we are diligently working on our end to find a workaround to resolve this issue and we will let you know once we found a solution as soon as possible. Thank you for bringing this to our attention.


DT Daniel Travison May 8, 2024 03:55 PM UTC

I have what may be a similar issue.

I'm using SfListView with an explicit ItemSize and an ItemTemplate.

The ItemTemplate has a Grid containing SKCanvasView and two label controls beneath it.  (see below).  The item template displays an image thumbnail, a title, and Glyph to indicate changes have been made.  The thumbnail is rendered in portrait or landscape and scales the image to the allocated size. 

The listview uses grouping and column span to adjust to my two use cases, editing and browsing. I use ItemSize to ensure a consistent height when a span contains portrait and landscape thumbnails.

Overall, this works quite well with one exception:  When an item has a portrait-mode image, the label beneath it is not tall enough causing the bottom of the text to be clipped. In my case, the character descenders are only partially displayed.   I've tried all kinds of approaches of margin, padding, a custom Label control your recommended MeasureOverride with no success. Note that this is not android specific, I see it on Windows as well and I can repro it with version 25.1.42.

When I view the properties in the live property viewer, the heights of the thumbnail and labels add up to more than the height of the grid as do the DesiredSize values.  This happens regardless of the value I use for SfListVIew.ItemSize.

After looking at this discussion, I found I can solve it by mirroriung the SfListview's ItemSize in the Grid's HeightRequest. 

FWIW: I've encountered similar problems in my own custom layout code and, right or wrong, I ended up explicitly setting the WidthRequest and HeightRequest values on the child control.

<Grid RowDefinitions="*, Auto"

      ColumnDefinitions="*, Auto"

      Margin="5"

      BackgroundColor="SteelBlue"

      <!-- Mirrow the ItemSize on the SfListView to avoid clipping -->

      HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type local:MazesView}}, Path=ItemSize}"

      >

    <controls:BitmapCanvas Grid.Row="0"

                           Grid.Column="0"

                           Grid.ColumnSpan="2"

                           Bitmap="{Binding Thumbnail, Mode=OneWay}"

                           MarginColor="{StaticResource Black}"

                           EnableTouch="False"

                           EnableTouchEvents="False"

                           Margin="2"

                           />

    <controls:Label Grid.Row="1"

                    Grid.Column="0"

                    Grid.ColumnSpan="2"

                    TextColor="WhiteSmoke"

                    Text="{Binding Meta.Title, Mode=OneWay}"

                    FontSize="{StaticResource ToolbarItemFontSize}"

                    LineBreakMode="NoWrap"

                    HorizontalOptions="Center"

                    />

    <controls:Label Grid.Row="1"

                    Grid.Column="1"

                    Style="{StaticResource SaveLabelStyle}"

                    />

</Grid>



SY Suthi Yuvaraj Syncfusion Team May 9, 2024 12:13 PM UTC

Hi Christian Kurz,

We have checked your requirements and wish to inform you that components such as BitMaps and Images may not render with accurate heights. Therefore, we advise you to specify appropriate HeightRequest and WidthRequest values for the BitmapCanvas controls to achieve the desired user interface appearance.

 <controls: BitmapCanvas Grid.Row="0"

    Grid.Column="0"

    Grid.ColumnSpan="2"

    Bitmap="{Binding Thumbnail, Mode=OneWay}"

    MarginColor="{StaticResource Black}"

    EnableTouch="False"

    EnableTouchEvents="False"

    Margin="2"

    HeightRequest="50"

    WidthRequest="50"<!-- Set the desired height here -->

    />


Also, you can overcome the issue by setting the AutoFitMode to Height or DynamicHeight, which will calculate the height based on the content. Please refer to the below documentation for more reference.

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

Please let us know if you have any concerns.

Regards,

Suthi Yuvaraj


GJ Gautam Jain August 2, 2024 06:35 AM UTC

Thanks. The AutoFitMode property of SfListView fixed the the issue.


JS Jayashree Suresh Anand Syncfusion Team August 5, 2024 06:24 AM UTC

Hi Gautam,

We are glad it fixed your issue, please get back to us if you need further assistance. Feel free to open a new forum if you encounter any issues. 

Regards,

Jayashree 


Loader.
Up arrow icon