Xamarin.forms: 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
   xml <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.
````xml
BackgroundColor="Yellow"
HorizontalOptions="Start"
VerticalOptions="Start">

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