CODEWITHSUNDEEP
xamlxamarinlayoutxamarin.forms
Bojan Malinić
Bojan Malinić

Reputation: 157

Why nested FlexLayout is not visible in this case?

Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayout2"
             x:Class="FlexLayout2.MainPage">

    <FlexLayout
        Direction="Column"
        JustifyContent="Start"
        AlignItems="Stretch">
        <FlexLayout
            Direction="Row"
            JustifyContent="Start"
            AlignItems="Stretch">
            <BoxView Color="Red"/>
            <BoxView Color="Black"/>
        </FlexLayout>

        <BoxView Color="Yellow"/>

    </FlexLayout>

</ContentPage>

What I got: Image

What I expected: Image

Question says it all. What I am missing ?

Xamarin Forms 3.2

Upvotes: 10

Views: 2208

Answers (3)

Himanshu Dwivedi
Himanshu Dwivedi

Reputation: 8174

If you place your child flex layout inside <ContentView> it will work:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayout2"
             x:Class="FlexLayout2.MainPage">

    <FlexLayout
        Direction="Column"
        JustifyContent="Start"
        AlignItems="Stretch">
        <ContentView>
            <FlexLayout
                Direction="Row"
                JustifyContent="Start"
                AlignItems="Stretch">
                <BoxView Color="Red"/>
                <BoxView Color="Black"/>
            </FlexLayout>
        </ContentView>
        <BoxView Color="Yellow"/>
    </FlexLayout>
</ContentPage>

Upvotes: 8

mbrmj
mbrmj

Reputation: 129

I'm having the same issue as yours. In case you want to have the FlexLayout height to be set automatically, change the first FlexLayout to StackLayout so your code will be as follow:

<StackLayout Orientation="Vertical" Spacing="0">
    <FlexLayout Direction="Row" JustifyContent="Start" AlignItems="Stretch">
        <BoxView Color="Red"/>
        <BoxView Color="Black"/>
    </FlexLayout>
    <BoxView Color="Yellow"/>
</StackLayout>

I don't know why it's not working when you have FlexLayout inside another FlexLayout unless you specify the height of the inner one. May be it's a bug.

Upvotes: 0

Mouse On Mars
Mouse On Mars

Reputation: 1132

It seems that the outer FlexLayout sets the height of the inner one to zero if you rely on the default value. Try the following code

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayout2"
             x:Class="FlexLayout2.MainPage">    
    <FlexLayout
        Direction="Column"
        JustifyContent="Start"
        AlignItems="Stretch">
        <FlexLayout HeightRequest="40"
            Direction="Row"
            JustifyContent="Start"
            AlignItems="Stretch">
            <BoxView Color="Red"/>
            <BoxView Color="Black"/>
        </FlexLayout>    
        <BoxView Color="Yellow"/>   
    </FlexLayout>    
</ContentPage>

Upvotes: 1

Related Questions