[MAUI 8] Label measurement is wrong, TailTruncation not working

[omghb]

Description

• On iOS and Android the Label does not respect the Width of the container
• On Windows the Label text is clipped but the TailTruncation is not applied

Steps to Reproduce

1. Create new MAUI 8 App
2. Replace MainPage.xaml with the following content:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout Padding="30" Spacing="25">
            <Grid BackgroundColor="LightBlue">
                <HorizontalStackLayout>
                    <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non tincidunt ligula, sit amet blandit arcu." 
                           LineBreakMode="TailTruncation"/>
                </HorizontalStackLayout>
            </Grid>
            <Button x:Name="CounterBtn" Text="Click me"/>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

3. run the app

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows

Affected platform versions

iOS 17, Android 13, Windows 10

Did you find any workaround?

No response

Relevant log output

No response

[PureWeen]

@omghb by default the HorizontalStackLayout uses infinite horizontal space to layout its content, so the content inside the HSL is going to extend beyond the Grid container. The reason you're seeing a difference here is related to a difference in the platforms on what platforms will clip the children.

This talks about the differences here https://learn.microsoft.com/dotnet/maui/migration/layouts

A StackLayout continues in its stacking direction until it runs out of content. It does not subdivide its container along that axis. If you want to limit your content to a constrained space in a direction, you should use another layout such as a Grid.

[ghost]

Hi @omghb. 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.

[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.

[omghb]

@PureWeen Thanks for the information.

For me this behavior is a bit strange:

so the content inside the HSL is going to extend beyond the Grid container.

I would have expected that the parent Grid would "clip" all its children.

However, by using Grids we should be able to solve our issues.

[mattleibow]

Layout can clip, but it appears since Forms days we never had the default to clip. Setting IsClippedToBounds = true will make it work as you expect:

https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.layout.isclippedtobounds?view=net-maui-8.0

[ghost]

Hi @omghb. 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.

[omghb]

@mattleibow Thanks for the explanation.

✔ The setting IsClippedToBounds="True" results in the behavior that I have expected.