Skip to content

Nested FlexLayouts don't show BackgroundColor #20461

Open
Open
Nested FlexLayouts don't show BackgroundColor#20461
Labels
area-layoutStackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenterlayout-flexFlexLayout issuesplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working
Milestone
Backlog
@mikeysouthwell

Description

@mikeysouthwell
mikeysouthwell
opened on Feb 9, 2024

Description

image

If I have FlexLayouts inside each other, none of the child FlexLayouts show their background colors. Only the parent FlexLayout works.

I am using the following versions:

Installed Workload Id Manifest Version Installation Source

maui-windows 8.0.3/8.0.100 VS 17.8.34525.116
maccatalyst 17.2.8004/8.0.100 VS 17.8.34525.116
android 34.0.43/8.0.100 VS 17.8.34525.116
ios 17.2.8004/8.0.100 VS 17.8.34525.116

Steps to Reproduce

<FlexLayout Direction="Row" BackgroundColor="Black" HeightRequest="48" AlignItems="Start" JustifyContent="Start" HorizontalOptions="Start" VerticalOptions="Start">
    <!-- Child FlexLayout on the left with a 24x24 pixel Rectangle inside -->
    <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Start" BackgroundColor="LightBlue" FlexLayout.Basis="48" FlexLayout.Grow="1" Margin="6,0,0,0">
        <Rectangle WidthRequest="24" HeightRequest="24" Fill="Blue" />
    </FlexLayout>

    <!-- Child FlexLayout on the right with 3 FlexLayouts inside it -->
    <FlexLayout Direction="Row" VerticalOptions="Start" AlignItems="Start" JustifyContent="SpaceBetween" BackgroundColor="Grey" FlexLayout.Basis="144">
        <!-- Each of these FlexLayouts has a 24x24 pixel Rectangle inside -->
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="Pink" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Red" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightGreen" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Green" />
        </FlexLayout>
        <FlexLayout Direction="Row" AlignItems="Center" VerticalOptions="Start" JustifyContent="Center" BackgroundColor="LightYellow" FlexLayout.Basis="48">
            <Rectangle WidthRequest="24" HeightRequest="24" Fill="Yellow" />
        </FlexLayout>
    </FlexLayout>
</FlexLayout>

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 34.0.43

Did you find any workaround?

No response

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-layoutStackLayout, GridLayout, ContentView, AbsoluteLayout, FlexLayout, ContentPresenterlayout-flexFlexLayout issuesplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions