Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to set FlexLayout height automatically according to its children height

processorprocessor Member ✭✭
edited October 2018 in Xamarin.Forms

Hello,
I'm trying to create a FlexLayout without specifying its height as I am supposing it will get it from its children height. When I'm doing so, the FlexLayout is not displayed at all. Here is a simple code:

    
    
    
        

I tried everything but nothing works unless I specify HeightRequest or FlexLayout.Basis for the (inner) FlexLayout.
Any Suggestions will be appreciated.

Tagged:

Best Answer

  • processorprocessor Member ✭✭
    Accepted Answer

    If I changed the first FlexLayout to StackLayout as follows, it will work.

        
        
            

    This is so weird as I assume it should work without changing it to StackLayout.

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @processor

    Please set FlexLayout.Grow to your inside FlexLayout

    For example:

    <FlexLayout FlexLayout.Grow="1" JustifyContent="Start" AlignItems="Start" AlignContent="Start" BackgroundColor="Blue" Direction="RowReverse" Wrap="Wrap">
    

    Please check the following link:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout#page-layout-with-flexlayout

  • processorprocessor Member ✭✭
    edited October 2018

    @BillyLiu Unfortunately this will not set the height of FlexLayout to its content's height. This will set its height to occupy all the unused vertical space.

    In my example above, the height of FlexLayout should be 50 because the label's height is 50. But I don't know how to make this happen automatically. may be it's not possible with FlexLayout :s

  • processorprocessor Member ✭✭
    Accepted Answer

    If I changed the first FlexLayout to StackLayout as follows, it will work.

        
        
            

    This is so weird as I assume it should work without changing it to StackLayout.

Sign In or Register to comment.