Grid with auto width columns overflows its container

[RsZoli]

Description

The lightblue background indicates a stacklayout, the gold/lightgreen/pink trio is a grid with 3 columns, each set to auto width!

The 3 columns each has a label with linebreakmode set to middletruncation, yet this does not happen, the grid overflows its container!

But, if i remove the auto width from the 2 outside columns, the linkebreakmode kicks in and it works perfectly!

However, if i reduce the content of the columns, truncation still happens but it should not be, since there is plenty space for the grid to grow!

Steps to Reproduce

Create a new .NET MAUI app, put a 3 coulm Grid inside a StackLayout in a ContentPage, set the Grid's columns to auto with and observe!

Link to public reproduction project repository

No response

Version with bug

8.0.61 SR6.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Closed similar issues:

• [regression/7.0.81] Grid can't use star and auto together in version 7.0.81 (#14520), similarity score: 0.80
• [regression/8.0.0-preview.5.8529] Grid with a star and an empty auto column leads to an incorrect layout (#16334), similarity score: 0.80
• Grid columns inside FlexLayout do not adjust their size correctly on Android (#11079), similarity score: 0.79
• Issue in Grid column sizing (#17097), similarity score: 0.79
• [regression/8.0.0-preview.5.8529] - Grid Columns Not Resizing Correctly (WinUI/MacCatalyst) (#15905), similarity score: 0.79

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[RsZoli]

Here you go: https://github.com/RsZoli/GitHubRepros

[ninachen03]

I can repro this issue at Android platform on the latest 17.11.0 Preview 5.0 (8.0.70 & 8.0.61 &8.0.3)
GitHubRepros-main.zip

[FlavioGoncalves-Cayas]

@mattleibow Please, can you guys do something about this?
You pretty much tell everyone to use Grids instead of StackLayouts if we want to have child elements to be constrained in their size, but somehow not even the Grid works properly.
Why should an Auto column ever let it's child render larger than the grid itself?

[michiel-nwa]

According to #10494 (comment) this is expected behaviour. It seems Auto is pretty much only usable for fixed width items and just save you from duplicating the size explicitly.

For your specific case I guess *,auto,* should work, but there doesn't seem to be anything generic that performs like you would expect (basically HTML table layout logic that optimizes your grid to make the best use of available space)

[FlavioGoncalves-Cayas]

That doesn't make any sense to me.
So a layout that behaves like the following images would not be achievable:

XAML left:

<Grid ColumnDefinitions="Auto,42" ColumnSpacing="16">
    <Label Grid.Column="0"
           LineBreakMode="TailTruncation"
           Text="short text" />
    <Border Grid.Column="1"
            BackgroundColor="Red"
            WidthRequest="42"
            HeightRequest="42"
            VerticalOptions="Start" />
  </Grid>

XAML right if it would work propertly:

<Grid ColumnDefinitions="Auto,42" ColumnSpacing="16">
    <Label Grid.Column="0"
           LineBreakMode="TailTruncation"
           Text="loger text that should truncate at the end when there is too much text to fit in the available space" />
    <Border Grid.Column="1"
            BackgroundColor="Red"
            WidthRequest="42"
            HeightRequest="42"
            VerticalOptions="Start" />
  </Grid>

Instead, above XAML produces this:

So my requirement that the text should only take the space it needs, but never more than is available can not be satisfied with any layout in a responsive way. Using a WidthRequest or MaximumWidthRequest for the Label is not a solution as that makes the layout not adapt automatically to different screen sizes.

[FlavioGoncalves-Cayas]

@hartez you said in the linked comment that this is by design. And sure the label can measure with infinite space, that's fine. But shouldn't the arrange step of the layout process limit the Labels width to something that does not break the Grids bounds and still fits the element with the fixed size.

[michiel-nwa]

@FlavioGoncalves-Cayas for that specific case I think you can do:
<Grid HorizontalOptions="Start" ColumnDefinitions="*,42" ColumnSpacing="16">

[FlavioGoncalves-Cayas]

Doesn't work. That will always position the red box at the end. But I want it to always be next to the label independent of the labels width

EDIT: You're right. Thanks for pointing that out.

[RsZoli]

According to #10494 (comment) this is expected behaviour. It seems Auto is pretty much only usable for fixed width items and just save you from duplicating the size explicitly.

For your specific case I guess ,auto, should work, but there doesn't seem to be anything generic that performs like you would expect (basically HTML table layout logic that optimizes your grid to make the best use of available space)

Okay, but for me, the truncation is the bigger issue here! But still, a content shouldn't overflow its container, in my opinion!

[michiel-nwa]

@RsZoli sorry messed up my formatting, intended to write *,auto,* I think that also fixes the truncation. Just limits the two elements to be the same width. (which may look extremely weird if one of the strings is much shorter than the other)

[RsZoli]

@RsZoli sorry messed up my formatting, intended to write *,auto,* I think that also fixes the truncation. Just limits the two elements to be the same width. (which may look extremely weird if one of the strings is much shorter than the other)

Sadly, that doesnt look good for my case!

[hartez]

This is not a bug, this is just what "Auto" in a Grid Column means. What you're expecting them to do (allocate the column space based on the measurement of all of the Labels in the row) can't happen for a couple reasons. Each cell of a Grid can have more than one item of content in it, and columns can span multiple rows. Accounting for those conditions means that automatic sizing based on flexible sizing of content is at best an expensive recursive process, and at worst impossible.

But all is not lost! .NET MAUI has a whole layout type dedicated to handling "flexible sizing of content": FlexLayout. To achieve the layout you want, you can do something like this:

<FlexLayout FlexLayout.Wrap="NoWrap"
			JustifyContent="Center">

	<Label Text="Left Side Text"
		   HorizontalTextAlignment="End"
		   FlexLayout.AlignSelf="Start"
		   BackgroundColor="Orange"
		   LineBreakMode="MiddleTruncation" />

	<Label FlexLayout.Shrink="0"
		   Text=" - "
		   BackgroundColor="Green" />

	<Label Text="Right Side Text"
		   HorizontalTextAlignment="Start"
		   FlexLayout.AlignSelf="End"
		   LineBreakMode="MiddleTruncation"
		   BackgroundColor="Magenta" />

</FlexLayout>

Doing that with several variations on the length of the text yields this:

[RsZoli]

@hartez Thank you for your answer, i will definetly change my layout per your recommendation!

However my main problem is not the sizing of Grid cells rather than the trail truncation which doesn't happen when needed and happen when should not!

[hartez]

I don't know what to tell you, it's not a bug. Auto Columns are not going to produce truncated text the way you want; that's just not how they work. There's another Layout which does precisely what you're asking for. This issue should be closed.