xamarin/Xamarin.Forms

FlexLayout item alignment Is incorrect when padding is applied

Aperta

#9101 aperta il 6 gen 2020

 (3 commenti) (0 reazioni) (0 assegnatari)C# (1926 fork)batch import
a/flexe/4 :clock4:feedback-tickethelp wantedinactivet/bug :bug:up-for-grabs

Metriche repository

Star
 (5644 stelle)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

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)

Guida contributor