Label text overlap in HorizontalStackLayout and Columns Grid

[filipleifer]

Description

Label text is overlaping in HorizontalStackLayout and Columns Grid. See steps to reproduce as example.

Steps to Reproduce

Create a page with:

<Grid Padding="20" BackgroundColor="AliceBlue">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Label Grid.Column="0" Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our" />
</Grid>

or

<HorizontalStackLayout Padding="20" BackgroundColor="AliceBlue">  
    <Label Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our" />
</HorizontalStackLayout >

Link to public reproduction project repository

No response

Version with bug

8.0.0-preview.7.8842

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

8.0.0-preview.7.8842

Affected platforms

iOS, Android

Affected platform versions

No response

Did you find any workaround?

No.

Relevant log output

No response

[jerry2007]

Same problem here...
Can you put in GA pls? @jsuarezruiz

[ghost]

Hi @filipleifer. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

Hi @filipleifer. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mattleibow]

@filipleifer can you attach a screenshot to show what you mean by "overlapping"? Also, maybe a sample that we can run to help demonstrate the issue.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[MarMarIV]

@mattleibow

Repo: https://github.com/MarMarIV/MAUI-Issue-16658

Screenshot:

[mattleibow]

I see you have net8 preview 7 in both the works well and version with the bug. Did you test on net8 p7 or was it broken there? Do you have a known working version?

[hartez]

@filipleifer Can you elaborate on what you expect to happen?

[jknaudt21]

I see you have net8 preview 7 in both the works well and version with the bug. Did you test on net8 p7 or was it broken there? Do you have a known working version?

This still repros on main.

[jknaudt21]

I started looking into this. I assume that the expected behavior is that the text wraps with the grid since the grid has resized itself the fit the screen if it has a margin. I would argue that if the grid does not have a margin, then this is expected behavior since the grid is allowed to grow indefinitely to fit its contents regardless of the screen size.

The reason why this is happening is that originally the grid doesn't have a width constraint, so it this setting percolates to the child (i.e the Label). Once it's time to finish up the measure, however, the grid clips itself because of its margin, yet the label who still thinks it has infinite width doesn't.

[samhouts]

probably related to #10494

[MarMarIV]

I see you have net8 preview 7 in both the works well and version with the bug. Did you test on net8 p7 or was it broken there? Do you have a known working version?

@mattleibow

Tested on workload:

I try this on older version 7.0.400 . Same problem:

[hartez]

@MarMarIV what is the expected behavior?

[hartez]

What you are seeing is the expected behavior for both HorizontalStackLayout and for a Grid with a ColumnDefinition of Auto. In both situations, the width constraint of the Label is infinity; the Label is allowed to be as wide as it wants to be. There is no constraint which will cause it to wrap, or to stop laying out past the edge of the container.

If the intent is for the Label to be cut off at the edge of the container, then you need to turn on clipping for the container; in MAUI (as in Forms), the IsClippedToBounds property of a Layout defaults to false. Add IsClippedToBounds="True" and you will see the Label cut off at the edge of the container.

If the intent is for the Label's text to wrap, then you need to give it a width constraint of some sort. The Grid's Column will need to be defined as either a fixed width (e.g,, 300) or as a * value (e.g., "1*"). A HorizontalStackLayout doesn't define a width constraint (by definition), so you will need to constrain the Label itself (e.g., MaximumWidthRequest="200".

Examples:

<ScrollView>
    <VerticalStackLayout
        Padding="30,0">

		<Label Text="Grid, Column width Auto, IsClippedToBounds is False" />
		<Grid ColumnDefinitions="Auto" Padding="20"
				BackgroundColor="Blue">
			<Label Grid.Column="0"
					Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time." />
		</Grid>

		<Label Text="Grid, Column width Auto, IsClippedToBounds is True" Margin="0,10,0,0" />
		<Grid ColumnDefinitions="Auto" IsClippedToBounds="True" Padding="20" 
				BackgroundColor="Blue">
			<Label Grid.Column="0"
					Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time." />
		</Grid>

		<Label Text="Grid, Column width *" Margin="0,10,0,0" />
		<Grid ColumnDefinitions="*" Padding="20" BackgroundColor="Blue">
			<Label Grid.Column="0"
					Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time." />
		</Grid>

		<Label Text="HorizontalStackLayout, IsClippedToBounds is False"
				Margin="0,10,0,0" />
		<HorizontalStackLayout Padding="20" BackgroundColor="Blue">
			<Label Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time." />
		</HorizontalStackLayout >

		<Label Text="HorizontalStackLayout, IsClippedToBounds is True"
				Margin="0,10,0,0" />
		<HorizontalStackLayout Padding="20" IsClippedToBounds="True"
								BackgroundColor="Blue">
			<Label Text="We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time." />
		</HorizontalStackLayout >

	</VerticalStackLayout>
</ScrollView>

[filipleifer]

@hartez What is the use case or user story of Label to have infinite width without respect space given by the parent container and wrap text accordingly ? I am really interested in it. Does it make sense to you ? It does not make sense to me. Futhermore it is breaking change from the behavior of Xamarin.Forms and you should be aware of it !

[ghost]

Hello lovely human, thank you for your comment on this issue. Because this issue has been closed for a period of time, please strongly consider opening a new issue linking to this issue instead to ensure better visibility of your comment. Thank you!