[Bug] Word wrapped Label not measured correctly

[JohnHDev]

Description

A Label in a grid that is contained in a StackLayout isn't measured correctly, with contents below the grid in the StackLayout overlapping the grid and label.

Steps to Reproduce

1. Create a new template XF solution.
2. Replace the MainPage xml with a new MainPage.cs
3. Replace the code with the following and fix the namespace accordingly:

using System;
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

namespace LabelSizeTest
{
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            On<iOS>().SetUseSafeArea(true);

            var grid = new Grid();
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });
            grid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });

            var label = new Label();
            label.LineBreakMode = LineBreakMode.WordWrap;
            label.Text = "This is a test teest test 2nd 3rd last";

            grid.Children.Add(label, 1, 0);

            var stack = new StackLayout()
            {
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand,
            };

            stack.Children.Add(new BoxView()
            {
                BackgroundColor = Color.Blue,
                HeightRequest = 50
            });

            stack.Children.Add(grid);

            stack.Children.Add(new BoxView()
            {
                BackgroundColor = Color.Blue,
                HeightRequest = 50
            });

            Content = stack;
        }
    }
}

4. Run on the iPhone 11 Simulator.

Expected Behavior

Label should display correctly, with all the text visible.

Actual Behavior

Label is being partially obscured by the 2nd BoxView, the words 3rd and Last are replaced with the BoxView.

Basic Information

• Version with issue:

• Last known good version:

• IDE: VS4Mac

• Platform Target Frameworks:

  • iOS:

• Nuget Packages: XF 4.2.0

• Affected Devices:

Screenshots

Reproduction Link

[JohnH-FF]

Any movement on this? It is blocking our release,

[JohnH-FF]

@samhouts @kingces95 any movement on this? Pretty serious bug IMO.

[JohnH-FF]

@samouts any movement on this?

[davidortinau]

I can reproduce this on Android as well. I tested 3.6, 4.4, and 4.5-pre1.

In my test I didn't find that the StackLayout made any difference. The Grid alone demonstrated this sizing problem.

<Grid BackgroundColor="LightGray" VerticalOptions="Start">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="1" 
               LineBreakMode="WordWrap"
               Text="START Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! END" 
            />
    </Grid>

[JohnH-FF]

I can reproduce this on Android as well. I tested 3.6, 4.4, and 4.5-pre1.

In my test I didn't find that the StackLayout made any difference. The Grid alone demonstrated this sizing problem.

<Grid BackgroundColor="LightGray" VerticalOptions="Start">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Column="1" 
               LineBreakMode="WordWrap"
               Text="START Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! Welcome to Xamarin.Forms! END" 
            />
    </Grid>

The stacklayout was simply to show how the text wrapped under the 2nd box. :)

[JohnH-FF]

@davidortinau Any idea on when this will get picked up for dev? We have had to release our product but with a very ugly on-screen workaround the users can see.

[JohnH-FF]

Hi all,
I have managed to work around the problem in code and remove the onscreen hack, so our users are happier now.
The work around involved manually measuring the contents of the row and setting the row height to that value. Basically doing with Auto should actually be doing.

So feel free to ignore this issue going forward, you have done an outstanding job of ignoring it so far.

[jefffhaynes]

Running into this same issue. I'll just scream into the void.

[hartez]

Okay, I've been digging into this a bit today.

Part of the problem is a bug in how the Grid is handling ColumnSpacing when working out the size of starred columns. So as a workaround, you may be able to mitigate this problem by setting the ColumnSpacing on the Grid to zero. I realize that's not a ton of help if you need, like, space between you columns. But it might help some folks.

I'll keep digging and see if I can find a fix.

[DragonTM]

Could anybody clarify if the has been released as we faced a pretty similar issue with XF 4.8.0.1534 and 4.8.0.1451?

[holecekp]

I am not sure if it is the same problem, but there is definitely some measurement bug for label with word wrap in XF 4.8 SR 3. I have a grid in the ItemTemplate for a ListView. It has 0.15* and 0.85* as column definitions. The second column contains a Label with multi-line text. Sometimes, the height of the label is calculated incorrectly and the last line is not visible (tested on both Android and UWP). As a workaround, try to replace some star values with fixed widths - changing column definitions to 60 and * fixed the problem in my case.

[hartez]

This fix has been released. But we have found some other issues involving star rows and columns in Grids. The fix for those is #12475 - you might check the "Issues Resolved" section to see if any of those issues match the problems you are seeing.

The fix in 12475 is still under review, but we hope to have it merged and released in the next service release for 4.8.

[JohnHDev]

@hartez thank you for the fix, I have updated to XF 4.8.0.1687 and at first glance its looking good!
One issue I did spot, on iOS if the text in the label is bound to a property and the property is updated with more text, a remeasure isn't triggered and so the text can wrap out of the cell again. I can create a repro for this if required. I haven't tried on Droid.

[johnshardman]

@JohnHDev - You may need to log a new issue. Once an issue is Closed, further comments don't always get noticed. I'm surprised by this, particularly when tags are used (I thought a tag would have resulted in a notification regardless of current state), but it's my experience.

[hartez]

@JohnHDev @johnshardman We do get notifications when we're tagged, even on closed issues. But we can't always get to them all immediately - most days I get dozens, if not more. New issues go into the triage queue, which means that at least that week's bug manager will see them and take a look.

[JohnHDev]

@hartez thank you for letting us know! Can you reopen this?
I have a repro where label still isn't being measured correctly:

New XF project, delete MainPage xml and xml.cs, create a new MainPage.cs with the following content:

public class MainPage: ContentPage
{
    public MainPage()
    {
        BackgroundColor = Color.Gray;

        Content = new StackLayout()
        {
            Padding = new Thickness(10, 40, 10, 10),
            Children =
            {
                new Grid()
                {
                    ColumnSpacing = 8,
                    ColumnDefinitions =
                    {
                        new ColumnDefinition() { Width = GridLength.Auto },
                        new ColumnDefinition() { Width = GridLength.Star },
                    },

                    Children =
                    {
                        new Grid()
                        {
                            RowSpacing = 0,
                            Children =
                            {
                                new Label()
                                {
                                    Text = "ABC123"
                                }
                            }
                        }.Row(0).Column(0),
                        new Frame()
                        {
                            Margin = 0,
                            Padding = 0,
                            CornerRadius = 8,
                            HasShadow = false,
                            HorizontalOptions = LayoutOptions.FillAndExpand,
                            Content = new Grid()
                            {
                                ColumnSpacing = 0,
                                VerticalOptions = LayoutOptions.CenterAndExpand,
                                ColumnDefinitions =
                                {
                                    new ColumnDefinition() { Width = GridLength.Auto },
                                    new ColumnDefinition() { Width = GridLength.Star },
                                },
                                RowDefinitions =
                                {
                                    new RowDefinition() { Height = GridLength.Auto }
                                },
                                Children =
                                {
                                    new Label()
                                    {
                                        Margin = new Thickness(6, 3, 6, 3),
                                        VerticalOptions = LayoutOptions.CenterAndExpand,
                                        Text = "dfg fg df dfg dfg dfg f dfg dfg dfg dff gdf gdf gd fg dfg df gdf g df gd gdf gf dg ffd gdf gdf g df gdf gd fg df gdg df dfg a"
                                    }.Row(0).Column(1)
                                }
                            }
                        }.Row(0).Column(1)
                    }
        }
            }
        };
    }
}

Run it on iPhone simulators to replicate (iPod touch, iPhone SE 14.2 etc), the label text wraps outside of the frame where as the frame should resize accordingly.
I believe the issue is related to the grid within the Frame.

[hartez]

@JohnHDev We just merged a couple more Grid fixes that might address your issue - #13085 and #13146. Can you give 4.8.0.1821 a try and see if you still have the issue?

[JohnHDev]

@hartez I saw David's tweet and was going to try it today. Just updated my repro project (to 4.8.0.1821), unfortunately the label still wraps out of the frame.

[PaulsonM]

Yes, sorry.. It didnt fix my issue (#13110) as well... Tried upgrading to Xamarin.Forms 5.0.0.1829-pre6 after seeing its release notes.

[PaulsonM]

@hartez , any update on this please?

[JohnH-FF]

@hartez will you reopen this pls? Or should we create a new issue and wait another year for a fix?
This issue was first reported December 2019, the 'fix' released 10 months later. And we broke the 'fix' in 10 minutes which doesn't say much for your QA.
I know that Maui is the new and shiny but come on, fix the nonsense we are currently using at least.

[FrankSzendzielarz]

Am getting this with a wordwrapped label in a grid in a grid in a list view. FillAndExpand everywhere. XF v5.0.0.1931. Word wrapping expands the parent grid but not that grid's parent. @hartez Setting ColumnSpacing in the top grid to zero helps a bit.

[JohnHDev]

Ive created a new bug with my new example above. Let's see if it takes another 8 months to fix. Clock starts... now!

[azrinsani]

Hi this is happening to me as well. In my case I am not using a grid, I am using a wrapping flex layout. This is an extremely big bug. We cannot release our app like this.

[JohnH-FF]

@azrinsani

We are dropping Xamarin and Xamarin.Forms, its just too buggy and it takes too long before bugs get fixed. 8 months for this bug and the fix just doesn't work. Utter nonsense.

@microsoft, just give up and throw in the towel.

[jefffhaynes]

Not giving up but Microsoft does need to overhaul the Xamarin team. They simply don't have the discipline necessary to develop something of this complexity.

[JohnHDev]

@jefffhaynes Ive been in the Xamarin ecosystem since MonoTouch, but as painful as it would be to move to a different technology stack, it feels like it might be better in the long run to take that hit now as it just isn't getting any better. Lack of communication from the Xamarin team doesn't help either, it appears they are all off working on the new and shiny Maui, and not dealing with the issues that their customers are having right here, and right now.
Bug tickets are triaged, scheduled for release, then pulled from that release into the next, and again, and again. It is frustrating and a terrible way to treat their customers.
@davidortinau do you have any comment on the state of Xamarin? Or are you too busy creating twitter content to actually help?

[mcerqueira1509]

Also ran into this same issue and, unfortunaly screaming into the void.

[losh99]

I've found the issue is still present in XF5.0.0.2244 and I think it's painfully obvious that it'll never get fixed. My label was using word wrap in an auto sized row of a grid, but the wrapped content was being cut off and not shown - only in Android.

@hartez does mention a workaround above which seemed to fix the issue for me, probably why this hasn't been reopened. I set Padding, ColumnSpacing, and RowSpacing to zero and the wrapped content magically became visible again. I then added Margin values to all the labels in the grid to get the correct spacing again, but this re-introduced the issue... @!$&£ so I guess it's the void for me too.

[devperson]

Any update on this issue?

[cervesus]

I've found the issue is still present in XF5.0.0.2244 and I think it's painfully obvious that it'll never get fixed. My label was using word wrap in an auto sized row of a grid, but the wrapped content was being cut off and not shown - only in Android.

@hartez does mention a workaround above which seemed to fix the issue for me, probably why this hasn't been reopened. I set Padding, ColumnSpacing, and RowSpacing to zero and the wrapped content magically became visible again. I then added Margin values to all the labels in the grid to get the correct spacing again, but this re-introduced the issue... @!$&£ so I guess it's the void for me too.

Thanks, the solution with the "0" spacings helped me to fix the issue (also only android). I've fixed the missing margins with "empty" rows and columns in the grid with a fixed size.