dotnet / dotnet/maui

[iOS] Wrong sizing of layouts

Open
#9,825 13 comments 3 reactions 0 assignees View on GitHub
area-controls-scrollview platform/ios s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 14h
Merged PRs (30d)
296

Description

### Description

Hi, I found out that layouts do not react to size changes of their children correctly on iOS. Let's have this quite simple layout:

```















```

On button click, the label with the text "Label with variable width" changes its width from 100 to 200 (and vice versa) - see code behind:

```
private void ButtonClicked(object sender, EventArgs e)
{
if (variableLabel.WidthRequest == 100)
variableLabel.WidthRequest = 200;
else
variableLabel.WidthRequest = 100;
}
```

### Examples
Here are examples of how clicking the button behaves on different platforms:

https://user-images.githubusercontent.com/65116078/187763596-76ad063c-a956-47fb-8a6d-15729041eb03.mp4

https://user-images.githubusercontent.com/65116078/187763611-64ae429b-503c-431c-8e69-e9092989d914.mp4

https://user-images.githubusercontent.com/65116078/187763620-cf836071-69ee-4cbc-8809-80153d0e8e9e.mp4

As you can see, **it behaves as expected on Windows and Android** (containers adjust to the size changes of their content), but on iOS it is completely wrong (containers do not adjust at all). The label with the text "Label with variable width" is also clipped from the bottom, which it should not be.

If I remove the ScrollView from the layout:

https://user-images.githubusercontent.com/65116078/187764749-c6d80c2d-f54e-409d-bd1b-07d547329293.mp4

Containers adjust to the wider label, but then it does not shrink back down.

If I remove the red BoxView too:

https://user-images.githubusercontent.com/65116078/187764856-94fc8ad7-c135-49c1-b1e4-44d866d138e2.mp4

The required behavior is almost there but not entirely - the label is still clipped from the bottom.

The problem is probably present on the macOS version too, but I have not had an opportunity to test it there yet.

I hope my description of the problem is clear. If not, feel free to ask 🙂

### Steps to Reproduce

Download the reproduction project, run it, and click the button a few times. You will see the behavior described above.

### Link to public reproduction project repository

https://github.com/RadekVyM/MauiBugs/tree/main/iOSWrongSizing

### Version with bug

6.0.486 (current)

### Last version that worked well

Unknown/Other

### Affected platforms

iOS

### Affected platform versions

iOS 15

### Did you find any workaround?

No

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked iOSWrongSizing reproduction project, run it on iOS 15, and click the button to compare layout behavior as the label width changes. Trace the MAUI iOS layout path responsible for measuring and arranging the Grid, Border, ScrollView, and StackLayout; done means containers resize in both directions without clipping, matching Windows and Android.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.