[iOS] Button.LineBreakMode Does Not Appear to Truncate in this Context: StackLayout > Border > Grid > Button

[pcharleszemora]

Description

There appears to be different behavior for Button.LineBreakMode on iOS and Android in the scenario included in the Steps to Reproduce section.

On iOS, one can see the Button.Text does not appear to truncate (Figure 1.1).
On Android, one can see the Button.Text does appear to truncate (Figure 1.2).

Is this behavior by design or a bug?

Figure 1.1: iOS

Figure 1.2: Android

Steps to Reproduce

1. Create a new .NET MAUI app
2. Replace the XAML in MainPage.xaml with this:

<?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">

    <VerticalStackLayout>
        <Border Margin="8"
                Padding="8"
                Background="White"
                StrokeShape="{RoundRectangle CornerRadius=4}"
                Shadow="{Shadow Radius=4, Opacity=.4}">
        
            <Grid Padding="8"
                  ColumnDefinitions="*"
                  RowSpacing="4"
                  RowDefinitions="*,*,*">

                <Label Grid.Row="0"
                       Grid.Column="0"
                       Text="Row 0: Hello, World!"
                       SemanticProperties.HeadingLevel="Level1" />

                <Label Grid.Row="1"
                       Grid.Column="0"
                       Text="Row 1: Welcome to .NET Multi-platform App UI"
                       SemanticProperties.HeadingLevel="Level2"
                       SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

                <Button Grid.Row="2"
                        Grid.Column="0"
                        x:Name="CounterBtn"
                        Text="Row 2: Why is this happening to this button in this context on this iOS simulator?" 
                        SemanticProperties.Hint="Counts the number of times you click"
                        Clicked="OnCounterClicked"
                        HorizontalOptions="Start"
                        BorderWidth="1"
                        BackgroundColor="White"
                        TextColor="Purple"
                        BorderColor="Purple"
                        Padding="0"
                        LineBreakMode="TailTruncation"/>
            </Grid>
        </Border>
    </VerticalStackLayout>

</ContentPage>

3. Replace the C# code in MainPage.xaml.cs with this:

namespace GridButtonLineBreak;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        var textColor = CounterBtn.TextColor;
        var backgroundColor = CounterBtn.BackgroundColor;

        CounterBtn.BackgroundColor = textColor;
        CounterBtn.TextColor = backgroundColor;
    }
}

4. Run the app on an iOS simulator.

Observed: The Button.Text does not truncate.
Expected: The Button.Text to truncate.

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

Affected platform versions

iOS 15.5

Did you find any workaround?

In this scenario, instead of using a Button, try using a Label w/ TapGestureRecognizer.

Relevant log output

No response

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[kubaflo]

@pcharleszemora @jsuarezruiz @PureWeen
You can remove the HorizontalOptions="Start" option from the button or set it to Fill which is a default option.

[albyrock87]

@kubaflo that works only if the text is always a long one.
With short text like "hello" the text would end up centered while the goal here is to have it left aligned.
Besides that, this is working on Android.

[kubaflo]

@albyrock87 okay I see, I will try to fix it

[kubaflo]

@albyrock87 check it out: #20133 :)