Bug 21844 - The height of a label that word-wraps is not properly used when computing content height of a Grid cell
Summary: The height of a label that word-wraps is not properly used when computing con...
Status: RESOLVED FIXED
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.2.2
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Bugzilla
URL:
Depends on:
Blocks:
 
Reported: 2014-08-05 16:00 UTC by Mitch Milam
Modified: 2018-02-14 16:53 UTC (History)
10 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:


Attachments
Sample screen shot (17.64 KB, image/png)
2014-08-05 16:00 UTC, Mitch Milam
Details


Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.


Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:
Status:
RESOLVED FIXED

Description Mitch Milam 2014-08-05 16:00:59 UTC
Created attachment 7594 [details]
Sample screen shot

NOTE: This may be a duplicate of Bug 21839 - Grid not sizing to contents 

If you have a label that uses word-wrapping the resultant height of the wrapped label is not considered in the height calculation for the contents of a Grid cell.

This results in an overflow condition where the items below the wrapped label are actually shown outside of the bounds of the grid cell.


Sample code:

var grid = new Grid
{
    VerticalOptions = LayoutOptions.Fill,
    HorizontalOptions = LayoutOptions.Fill,
    Padding = new Thickness(10),
    BackgroundColor = Color.Green,
    ColumnDefinitions =
    {
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Star)}
    }
};

var stack = new StackLayout
{
    Padding = new Thickness(5),
    Spacing = 5,
    Orientation = StackOrientation.Vertical,
    VerticalOptions = LayoutOptions.FillAndExpand,
    BackgroundColor = Color.White,
    Children =
    {
        new Image
        {
            Source = ImageSource.FromFile("Icon@2x.png"),
            VerticalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "Billy Joe Bob Smith",
            TextColor = Color.Black,
            LineBreakMode = LineBreakMode.WordWrap,
            Font = Font.SystemFontOfSize(16),
            VerticalOptions = LayoutOptions.End
        },
        new StackLayout
        {
            Padding = new Thickness(5),
            Orientation = StackOrientation.Vertical,
            VerticalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.Blue.WithLuminosity(0.5),
            Children =
            {
                new Label
                {
                    Text = "Accounting, Finance and Management with concentration on Analytical Consulting",
                    TextColor = Color.Black,
                    LineBreakMode = LineBreakMode.WordWrap,
                    Font = Font.SystemFontOfSize(16),
                    VerticalOptions = LayoutOptions.FillAndExpand
                }
            }
        }
        ,
        new Label
        {
            Text = "(Director)",
            TextColor = Color.Black,
            Font = Font.SystemFontOfSize(16),
            VerticalOptions = LayoutOptions.End
        },

    }
};

grid.Children.Add(stack, 0, 0);
Content = grid;
}
Comment 1 Arpit Jha 2014-08-20 11:50:47 UTC
I have Checked this issue and able to reproduce it

Steps to reproduce this issue.
1.Create  Xamarin forms application
2.Add a (.Xaml) class and add  above code in class
3.Run the application


I observed that  there are three lables in code and only two lables  shown on Screen and  third label text does not display due to grid wrap the words        

Screencast: http://screencast.com/t/eFlKt1tm

Environment  Info: 
XVS 3.3.47.0
Xamarin.Forms Version: 1.2.2.6243
Comment 2 Arpit Jha 2014-08-21 03:25:49 UTC
  Forgot to Mention ,I also observed that after modification in code if we can use
  GridUnitType.Auto for Set the width of column then 

      ColumnDefinitions =
    {
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Auto)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Auto)},
        new ColumnDefinition {Width = new GridLength(1, GridUnitType.Auto)}

        
    }

  word does not wrap.

 Environment is same as Comment1.
Comment 3 Michael 2015-05-20 16:05:48 UTC
I have confirmed that the Grid is resizing based on the contents of the items and the third label text is displayed. This was testing with Xamarin.Forms 1.4.2
Comment 4 Paul Diston 2017-01-03 10:07:57 UTC
Is this still an issue? I am running into a similar issue with using WordWrap for a label inside a Grid. I am running version 2.3.2.127 of Xamarin Forms.
Comment 5 Fabio 2017-08-25 15:15:48 UTC
Same problem for me, the height of labels inside listview template seems to be randomly calculated like for a single row when they are word wrapped.
Comment 6 ksemenenko 2018-02-14 16:53:47 UTC
I have the same issue on Android in Xamarin Forms 2.5.0.122203.

 <layouts:ForceGrid BackgroundColor="Transparent">
        <ScrollView Orientation="Horizontal" Scrolled="ScrollView_OnScrolled" x:Name="HeaderScrollView"  >
            <layouts:ForceGrid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="8" />
                    <RowDefinition Height="15" />
                    <RowDefinition Height="31" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
.....

My Grid can not take up all the space.