Xamarin.forms: [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;
        }
    }
}

1. 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 60and * 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 https://github.com/xamarin/Xamarin.Forms/pull/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.