xamarin/Xamarin.Forms

FlexLayout item alignment Is incorrect when padding is applied

Open

#9,101 opened on Jan 6, 2020

View on GitHub
 (3 comments) (0 reactions) (0 assignees)C# (5,644 stars) (1,926 forks)batch import
a/flexe/4 :clock4:feedback-tickethelp wantedinactivet/bug :bug:up-for-grabs

Description

This issue has been moved from a ticket on Developer Community.

In the latest XF 4.4 if you use the following code you will see that the aligment set using JustifyContent is incorrect. The calculated position of the elements is wrong.

<FlexLayout
	Padding="20,0,20,0"
	AlignContent="Center"
	AlignItems="Center"
	JustifyContent="Center"
	Wrap="Wrap">

<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Start">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JS"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Center">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JC"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		Padding="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="End">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="With Padding JE"
			TextColor="White" />
	</FlexLayout>
	<FlexLayout
		Margin="5,5,5,5"
		AlignContent="Center"
		AlignItems="Center"
		BackgroundColor="#8000ff00"
		FlexLayout.Basis="100%"
		HeightRequest="60"
		JustifyContent="Center">
		<Label
			BackgroundColor="Pink"
			FontSize="Title"
			Text="Correct"
			TextColor="White" />
	</FlexLayout>
</FlexLayout>

In the justify start one you can see that the Padding of 5 left anf 5 right is summed to be 10 left. The center justify shows the label padding to the left 10 units as well. The justify end shows that the label actually extends beyonf the bounds of the container layout by 10 units.

The final example shows the layout with no padding and the justify center appears correct.

Original Comments

Visual Studio Feedback System on 1/2/2020, 01:36 AM:

Original Solutions

(no solutions)

Contributor guide

Tech stack
csharp
Domain
mobilefrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic Xamarin.Forms knowledgeUnderstanding of FlexLayout layout
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
Investigate the FlexLayout layout algorithm in Xamarin.Forms, specifically how padding is accounted for in measuring and arranging child elements. Look at the FlexLayout source code (likely in Xamarin.Forms.Core/PlatformConfiguration/WindowsForms? or relevant files) for methods like MeasureOverride and ArrangeOverride. Check if padding is being applied to the layout area before aligning children, or if it is incorrectly affecting the justifyContent calculations. Verify the behavior against the CSS Flexbox specification. There are no linked PRs or recent comments; the issue was moved from Developer Community in 2020.