dotnet / dotnet/maui

FlexLayout inside a Grid doesn't update row Height correctly with Direction=Row and Wrap=Wrap

Open
#12,502 4 comments 0 reactions 0 assignees View on GitHub
area-layout layout-flex platform/android platform/windows s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

This example shows a Grid that simulates two rows of a calendar. In each cell of the grid, there is a FlexLayout that will contain a dynamic list of items.



<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="HorizontalOptions" Value="Start"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="Direction" Value="Row"/>
<Setter Property="Wrap" Value="Wrap"/>
<Setter Property="AlignItems" Value="Start"/>
<Setter Property="JustifyContent" Value="Start"/>
<Setter Property="AlignContent" Value="Start"/>
<Setter Property="VerticalOptions" Value="FillAndExpand"/>


<Setter Property="Color" Value="Green"/>
<Setter Property="WidthRequest" Value="30"/>
<Setter Property="HeightRequest" Value="30"/>
<Setter Property="Margin" Value="4"/>


<Setter Property="Stroke" Value="Yellow"/>
<Setter Property="StrokeThickness" Value="2"/>


























































































The result is as follows:

![image](https://user-images.githubusercontent.com/42174654/211211226-6220f6b9-98e9-45c6-8e39-7c47c6c34ca2.png)

As you can see in the image, not all the elements of the FlexLayout are shown, only the first row is shown.
Increasing the height of the BoxView, the height of the FlexLayout also increases (didn't work with Hot Reload), and still shows only the first row.

![image](https://user-images.githubusercontent.com/42174654/211210934-2265f636-3e96-4e46-a6ce-274945322dc7.png)

### Steps to Reproduce

1. Download the solution from the repo
2. Run the app

As you can see, the height of the Border containing the FlexLayout doesn't grow to include all child items, it only considers the height of 1 row

Changing the height of the items, changes the height of the FlexLayout, but just the first row is shown

### Link to public reproduction project repository

https://github.com/drossoft/FlexLayoutSample

### Version with bug

7.0 (current)

### Last version that worked well

Unknown/Other

### Affected platforms

Android, Windows, I was *not* able test on other platforms

### Affected platform versions

Windows SDK 10.0.19041.0, Android 11

### Did you find any workaround?

Haven't found a workaround

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by downloading and running the linked FlexLayoutSample reproduction, then inspect how the Grid measures the nested FlexLayout with Direction="Row" and Wrap="Wrap" on Android and Windows. Compare the Border and FlexLayout sizes with the visible child rows; done means all wrapped children are included in the container height on the affected platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop-dev, frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.