StackLayout can be expand more than screen now

[albilaga]

Description

StackLayout on MAUI now can be out of screen. Consider layout like this

<HorizontalStackLayout>
            <Label
                LineBreakMode="TailTruncation"
                MaxLines="2"
                Text="{Binding Text}"
                VerticalTextAlignment="Center" />
            <Button Text="Edit" />
        </HorizontalStackLayout>

What I expect is when the Text is too long it will be cut off and continue next line. But now MAUI just render it out of screen
See the image on line 1

Of course if the text always long then I can consider myself to use Grid and just use ColumnDefinitions="*,Auto" and it will work like in line 2. Then the problem solved. But Text is dynamic property which means text can be short or long. So if text is short I want it to behave like line 3. But then if I use grid it will be like line 4.

Steps to Reproduce

1. Clone the repo https://github.com/albilaga/MauiIssues and open the project
2. Click the OutOfScreenLabel. It will show the image that I post in above

Link to public reproduction project repository

https://github.com/albilaga/MauiIssues

Version with bug

8.0.61 SR6.1

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android

Affected platform versions

iOS 15, Android

Did you find any workaround?

Not yet

Relevant log output

No response

[github-actions[bot]]

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!

Open similar issues:

• Label text overlap in HorizontalStackLayout (#22130), similarity score: 0.81

Closed similar issues:

• iOS label within horizontalstacklayout overflowing container (#12895), similarity score: 0.80
• Compatibility HorizontalStackLayout does not constrain correctly (#12415), similarity score: 0.78
• Label that HorizontalOptions is "EndAndExpand" in HorizontalStackLayout are not working (#16972), similarity score: 0.77
• StackLayout in RefreshView expands outside of the screen bounds (#9371), similarity score: 0.77

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

[RoiChen001]

I can repro this issue at Android platform on the latest 17.11.0 Preview 2.1 (8.0.61).

[PureWeen]

This was an intentional change from XF
https://learn.microsoft.com/en-us/dotnet/maui/migration/layouts?view=net-maui-8.0#stacklayout

[albilaga]

@PureWeen then how do I want to achieve text is basically don't want to out of screen but still stacked nicely if it is not too long?
I also tried using grid like this

<Grid ColumnDefinitions="Auto,*">
            <Label
                LineBreakMode="TailTruncation"
                MaxLines="2"
                Text="5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vel sapien ut odio sollicitudin iaculis vel ut tortor. Proin mauris magna, tincidunt a congue vitae, pellentesque ac ligula."
                VerticalTextAlignment="Center" />
            <Button Grid.Column="1" Text="Edit" />
        </Grid>

but it is resulted in this also (see number 5)

[drasticactions]

@albilaga Your column layout is backwards, it should be "*, Auto". You need the label to take up the full width of the given space within the parent container, and the button to fill only the intrinsic width of the button itself.

Setting "Auto" on label is saying that the Label should fill whatever width it has, which is none since that needs to be set by whatever its parent container is. So it'll never wrap and it'll break the other column. That's not a bug in MAUI as far as I know, that's a misconfiguration.

[albilaga]

@drasticactions that's why I add description in my issue

Of course if the text always long then I can consider myself to use Grid and just use ColumnDefinitions="*,Auto" and it will work like in line 2. Then the problem solved. But Text is dynamic property which means text can be short or long. So if text is short I want it to behave like line 3. But then if I use grid it will be like line 4.

The problem using *,Auto is that means the button will always be at the end of the screen even though if the text is short

[albilaga]

@PureWeen is this the expected behavior now? so this layout is not possible?

[stephenquan]

You can use MultiMathExpressionConverter from CommunityToolkit.Maui to solve your problem:

<HorizontalStackLayout x:Name="horizontalStackLayout">
    <Label
        LineBreakMode="TailTruncation"
        MaxLines="2"
        MaximumWidthRequest="{MultiBinding {Binding Width, Source={Reference horizontalStackLayout}},
                                           {Binding Width, Source={Reference button}},
                                           Converter={StaticResource MultiMathExpressionConverter},
                                           ConverterParameter='x-x1'}"
        Text="{Binding Text}"
        VerticalTextAlignment="Center" />
    <Button x:Name="button" Text="Edit" />
</HorizontalStackLayout>

If you wish to eliminate the need to use x:Name in your Binding, you can use RelativeSource Self, e.g.

<HorizontalStackLayout>
    <Label
        LineBreakMode="TailTruncation"
        MaxLines="2"
        MaximumWidthRequest="{MultiBinding {Binding Parent.Width, Source={RelativeSource Self}},
                                           {Binding Parent[1].Width, Source={RelativeSource Self}},
                                           Converter={StaticResource MultiMathExpressionConverter},
                                           ConverterParameter='x-x1'}"
        Text="{Binding Text}"
        VerticalTextAlignment="Center" />
    <Button Text="Edit" />
</HorizontalStackLayout>

[albilaga]

I see. I already have some hacky way to do this myself but now it is confirmed that MAUI won't be able to do this anymore. Thank you for the snippet @stephenquan