dotnet / dotnet/maui

Irregular placement of views with margins

Open
#8,324 3 comments 0 reactions 0 assignees View on GitHub
area-layout layout-stack partner/syncfusion platform/android s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 15h
Merged PRs (30d)
290

Description

### Description

Hi,

Views that have margin are sometimes off position. This is likely due to a bug in the code:

https://github.com/dotnet/maui/blob/bcaea570dd469404fce699c9bf38cf8a18a65897/src/Core/src/Layouts/LayoutExtensions.cs#L136

The code tries to calculate the additional space required by VerticalOptions.Center/End, and it uses view.DesiredSize.

However DesiredSize includes view's requested size + vertical margin height, and if that is larger than bound's height, the result is negative, and the position of element reverses!

See, here we have a horizontal stack with height of 40pt, and couple of boxes sized 20pt x 20pt. The first three include no margin, and you can see, they are positioned correctly. But when margin top 40pt is introduced, they (except the Start one) break.

![image](https://user-images.githubusercontent.com/6239205/175767808-7c6f8603-acb2-4ec3-ace4-488cae637569.png)

```XML







```

It is worth noting this is likly affecting horizontal alignment too in the same code file referenced above.

### Steps to Reproduce

1. Create a MAUI project
2. Copy the code above into the main page
3. Run and observe

### Version with bug

6.0.400 (current)

### Last version that worked well

Unknown/Other

### Affected platforms

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

### Affected platform versions

Android 9

### Did you find any workaround?

Setting VerticalOptions to Start.

### Relevant log output

_No response_

Contributor guide

Open the contributing guide

Research direction

Start in src/Core/src/Layouts/LayoutExtensions.cs around line 136 and reproduce the issue with the provided HorizontalStackLayout XAML. Compare the alignment calculation for views whose margins exceed the available height, including Center and End options, and verify the same path for horizontal alignment. Done means the margin examples remain correctly positioned instead of reversing.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.