[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.