FlexLayout height not rendered correctly when placed inside Grid

[xyfoo]

Description

FlexLayout (without explicit HeightRequest) placed inside a Grid's Row (Height="Auto"), the FlexLayout will be rendered as the same height as the Grid.

Observation

• Flexlayout with explicit ```HeightRequest``. Grid render correctly.
• Swap out FlexLayout with other controls. Grid render correctly.
• FlexLayout without explicit HeightRequest inside a StackLayout. Render correctly.

Steps to Reproduce

1. Create a new Forms project and update to v 3.5.0.129452
2. Add the following

   <Grid x:Name="grid" RowSpacing="0">
       <Grid.RowDefinitions>
           <RowDefinition Height="*"/>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
       <BoxView Grid.Row="0" BackgroundColor="Red" VerticalOptions="FillAndExpand"/>
       <FlexLayout x:Name="flex" Grid.Row="1" BackgroundColor="Yellow">
           <Button Text="Check Height" Clicked="CheckHeight_Clicked" HeightRequest="40" />
       </FlexLayout>
       <BoxView Grid.Row="2" BackgroundColor="Green" VerticalOptions="FillAndExpand"/>
   </Grid>
   

3. Run the app

Expected Behavior

• FlexLayout's height will only be as high as it's content.
• Red & green colored box view will take up most of the vertical space.

Actual Behavior

• FlexLayout covered the whole page.

Basic Information

• Tested on: Simulator & device
• Version with issue: From 3.0.0.446417 to 3.5.129452
• Last known good version: None.
• IDE: VS 2017 Enterprise v15.9.6
• Platform Target Frameworks:
  • iOS: 12.1
  • Android: 8.1
• Android Support Library Version:: 28.0.0.1
• Xamarin: 4.12.3.79
• Xamarin.Android SDK: 9.1.5.0
• Xamarin.iOS and Xamarin.Mac SDK: 12.2.1.12

Screenshots

Actual behavior vs Expected behavior

Reproduction Link

xfbug.zip

[pauldipietro]

Also tested against the latest 4.0-pre

[nbevans]

I believe I'm seeing the same issue on UWP.

[nbevans]

https://github.com/xamarin/Xamarin.Forms/blob/50dbbcf55d71f75fa79aa87e8514799b322f3bda/Xamarin.Forms.Core/FlexLayout.cs#L401

Likely caused by this.

[nbevans]

I created this (F#) workaround which sort of fixes the issue for me - though it's not perfect, it is bit glitchy when resizing the UWP window.

Something is really wrong with that OnMeasure method in the core implementation of XF.

type FlexLayout_HackFix20190326() =
    inherit FlexLayout()

    override self.OnMeasure(widthConstraint, heightConstraint) =
        let height = self.Children |> Seq.map (fun c -> c.Measure(Double.PositiveInfinity, Double.PositiveInfinity).Request.Height + c.Bounds.Top) |> Seq.maxBy id
        base.OnMeasure(widthConstraint, height)

[nbevans]

Will this ever be fixed? It basically makes FlexLayout unusable. My "fix" above isn't really good enough - it's too glitchy for production use.

[rotorgames]

The same for me

[DoubleDBE]

Same here. I'm temporary wrapping the FlexLayout inside a StackLayout until this issue is solved.

[rotorgames]

@DoubleDBE Wrapping StackLayout can help. Also, we can get the same behavior as StackLayout if we override OnMeasure in FlexLayout and change widthConstrain or heigthContrain to double.PositinInfinity. But FlexLayout calculates the size of elements inside incorrectly. For example, when I put Label with long text, Grow = 0.5 and WordWrap inside FlexLayout I got incorrect label height and the text was cut.

[acastr7]

Just ran into this issue with a FlexLayout out inside my ViewCell. Wrapping in StackLayout as a work around helped.

[YZahringer]

Same problem, here is an example where the FlexLayout should be aligned at the beginning at the top but it takes all the space horizontally and vertically.

    <Grid
        BackgroundColor="Yellow"
        HorizontalOptions="Start"
        VerticalOptions="Start">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <FlexLayout
            AlignContent="Start"
            AlignItems="Start"
            AlignSelf="Start"
            BackgroundColor="Blue"
            Direction="Row"
            HorizontalOptions="Start"
            JustifyContent="Start"
            VerticalOptions="Start">
            <Label
                BackgroundColor="Red"
                FlexLayout.Basis="100"
                FlexLayout.Grow="0"
                HorizontalOptions="Start"
                HorizontalTextAlignment="Start"
                Text="Content1"
                WidthRequest="100" />
            <Label
                BackgroundColor="Orange"
                FlexLayout.Basis="100"
                FlexLayout.Grow="0"
                HorizontalOptions="Start"
                HorizontalTextAlignment="Start"
                Text="Content2"
                WidthRequest="100" />
        </FlexLayout>
    </Grid>

[JasonLooney]

Can also be reproduced in the official samples (see the Experiment page): https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/FlexLayoutDemos

[ChrisTTian667]

Same here working with XF4.7, is anybody working on this problem?

[xperseguers]

Same problem but I'm within an AbsoluteLayout, maybe related (https://forums.xamarin.com/discussion/184860/problem-with-a-scrollview-having-a-flexlayout-inside-absolutelayout#latest).

It looks as if the extra height added to my ScrollView is related to the height it would take if the FlexLayout was a simple StackLayout and no wrapping would be done with the content.

I tried as suggested to wrap my FlexLayout into an(other) StackLayout but it does not help.

@nbevans My mobile app will obviously not "resize" (maybe change orientation but I could possibly live with that). Is your hack somehow to be implemented for both iOS and Android somehow? Custom renderer? Mind providing the code?

[divyesh008]

Same here. I'm temporarily wrapping the FlexLayout inside a StackLayout until this issue is solved.

Yes, exactly, I am facing this issue yet so I have wrapped FlexLayout with StackLayout, and it works fine.

<StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" Padding="10" VerticalOptions="Start">
    <FlexLayout BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="Start" BindableLayout.ItemsSource="{Binding ItemCollection}"
            Direction="Row" Wrap="Wrap" JustifyContent="Start" AlignContent="Start" Margin="0" Padding="0">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <pancake:PancakeView BackgroundColor="Blue"
                    HasShadow="False" IsClippedToBounds="True" Padding="5" Margin="5"
                    CornerRadius="10" HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Start">
                    <Label Text="{Binding Title}" TextColor="White" HorizontalOptions="Center"
                        VerticalOptions="Center" HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center" />
                </pancake:PancakeView>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</StackLayout> 

[what3var]

FYI: Having placed the Flexlayout inside a Stacklayout which is placed inside two nested Grids triggers a NullReferenceException in LayoutSubviews().. Removing the uppermost Grid resolves this.

[carbonete]

Hi, any news? I'm going to forms 5.0 and this problem persist.

thanks

[carbonete]

Same here. I'm temporarily wrapping the FlexLayout inside a StackLayout until this issue is solved.

Yes, exactly, I am facing this issue yet so I have wrapped FlexLayout with StackLayout, and it works fine.

<StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" Padding="10" VerticalOptions="Start">
    <FlexLayout BackgroundColor="Green" HorizontalOptions="FillAndExpand" VerticalOptions="Start" BindableLayout.ItemsSource="{Binding ItemCollection}"
            Direction="Row" Wrap="Wrap" JustifyContent="Start" AlignContent="Start" Margin="0" Padding="0">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <pancake:PancakeView BackgroundColor="Blue"
                    HasShadow="False" IsClippedToBounds="True" Padding="5" Margin="5"
                    CornerRadius="10" HeightRequest="30" HorizontalOptions="Start" VerticalOptions="Start">
                    <Label Text="{Binding Title}" TextColor="White" HorizontalOptions="Center"
                        VerticalOptions="Center" HorizontalTextAlignment="Center"
                        VerticalTextAlignment="Center" />
                </pancake:PancakeView>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </FlexLayout>
</StackLayout> 

Thanks this work

[mlyrstad]

Can we please have some feedback on if/when this problem is going to be solved? Since there is no true MinimumWidthRequest, the only option is to wrap buttons (and other things) in FlexLayout to get the desired behavior but having to wrap the flexlayout in a stacklayout means yet another needless layer between...

Some answers on whether this will be fixed would be highly appreciated. Thank you.

to get the desired behavior

Scratch that. This doesn't work either, because the greedy space behavior of FlexLayout goes both ways making this not work either. Back to the drawing board then I guess.

[kerberosargos]

Same issue is for me too. is there any news about that?

[azrinsani]

Hello 2021??? I n my case even wrapping around stack layout doesn't seem to work!!!

[Softtinn]

Any news on this?!

[kerberosargos]

Any update?

[kerberosargos]

We can not use FlexLayout because of this bug. How to solve this issue? Please someone interested in this bug.

[kerberosargos]

I created this (F#) workaround which sort of fixes the issue for me - though it's not perfect, it is bit glitchy when resizing the UWP window.

Something is really wrong with that OnMeasure method in the core implementation of XF.

type FlexLayout_HackFix20190326() =
    inherit FlexLayout()

    override self.OnMeasure(widthConstraint, heightConstraint) =
        let height = self.Children |> Seq.map (fun c -> c.Measure(Double.PositiveInfinity, Double.PositiveInfinity).Request.Height + c.Bounds.Top) |> Seq.maxBy id
        base.OnMeasure(widthConstraint, height)

Hello is there any C# implementation?

[kerberosargos]

@samhouts What is the problem about this bug?

[chaoyebugao]

It's 2021, WILL THIS PROBLEM LAST IN MAUI ?

[nbevans]

@ryanharding Be prepared for same-shit-different-shit in Flutter. Last time I checked it out they were still faffing about trying to make textual word wrap and ellipsis work properly on all platforms.

[KevinAnass]

it works fine to me this my XAML code

data template

<DataTemplate x:Key="templateChartPercent">
        <controllers:ChartPercent
            Title="{helper:Translate PaymentMethode}"
            Margin="7"
            FlexLayout.AlignSelf="Center" />
    </DataTemplate>

FlexLayout

<FlexLayout
                        x:Name="lstChart"
                        BindableLayout.ItemTemplate="{StaticResource templateChartStatic}"
                        Style="{StaticResource FLBase}" />

style

 <Style
            x:Key="FLBase"
            TargetType="FlexLayout">
            <Setter Property="AlignContent" Value="Start" />
            <Setter Property="AlignItems" Value="Start" />
            <Setter Property="Direction" Value="Row" />
            <Setter Property="HorizontalOptions" Value="FillAndExpand" />
            <Setter Property="JustifyContent" Value="SpaceBetween" />
            <Setter Property="VerticalOptions" Value="Start" />
            <Setter Property="Wrap" Value="Wrap" />
        </Style>

[nZeus]

Feb 2022, the issue is still there... Will this ever be fixed? The issue is more than 2years old...

[wagenheimer]

March-2022 nd still no fix? =(