maui: Label doesn't render correctly when in a Grid with column definitions

Description

Label that is set with the end trailing doesn’t display the trailing dots (…)
Label that is set with MaxLines=“3” doesn’t always display the 2nd and 3rd lines when in a grid (there is a situation when the 3 lines are rendered but the grid size expands only to the first line and the 2nd and 3rd lines are visible outside of the grid).

Steps to Reproduce

This example would display only two lines. One from row 1 and another from row 2. What is expected is to see more than one lines in the 2nd row. (Look for a picture in the comments bellow.)

                    <Grid 
                        RowDefinitions="auto,auto"
                        ColumnDefinitions="auto,*,auto"
                        BackgroundColor="LightBlue"
                        VerticalOptions="Start"
                        >

                        <!-- first line -->
                        <Label
                            Margin="0,16,0,0"
                            VerticalOptions="Start"
                            HorizontalOptions="Start"
                            Grid.Row="0"
                            LineBreakMode="TailTruncation"
                            Text="s{Binding CustomerName} HHHHHHHHH HHHHHHHHH HHHHHHHHHHH HHHHHHHHHHH"
                            FontSize="16"
                            />

                        <!-- second line -->
                        <Label
                            Grid.Row="1"
                            Margin="0,0,16,16"
                            VerticalOptions="Start"
                            HorizontalOptions="Start"
                            LineBreakMode="WordWrap"
                            Text="x{Binding Notes}xxxxxxxx OO xxxxxxxxxxxHHHHH xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx 333333333333333333333"
                            MaxLines="3"
                            LineHeight="1"
                            FontSize="12"
                            BackgroundColor="Yellow"
                            />


                    </Grid>

Link to public reproduction project repository

none, example provided in the description

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 15.4

Did you find any workaround?

if the columns definitions are removed it would render correctly. In real scenario the columns are needed and can’t be removed.

Relevant log output

No response

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 12
Comments: 15 (4 by maintainers)

Most upvoted comments

The fact that the text does not wrap in the second Label is not a bug, it’s as designed. The Label is in column with a Width of Auto; this means that each item in the column is measured as if it had infinite width available. Given infinite width, the Label has no reason to wrap its text, and simply lays it out in a single line that runs off the edge of the Grid. The other two columns are empty, so they have no effect on the layout at all.

If you want the Label to wrap at the edge of the Grid, you should set the ColumnDefinitions to *.

For the Label with LineBreakMode set to TailTruncation, it looks like we do have a bug; even with the columns set to *, it won’t truncate properly. It looks like the issue is related to having HorizontalOptions="Start". As a workaround until we can fix it, you can set the HorizontalOptions for that Label to Fill and the text will truncate as expected.

hartez on Oct 6, 2022

@dimitar-sd I’ve faced this issue as well and I believe I found a workaround. In my case when I removed the HorizontalOptions property from the Labels the Truncation worked. I also tried it on your code and changed a few things in your example to achieve what you described (If I understood your requirements correctly).

        <Grid
            Margin="10"
            RowDefinitions="auto,auto"
            VerticalOptions="Start"
            BackgroundColor="LightBlue">

            <!-- first line -->
            <Label
                Margin="0,16,0,0"
                VerticalOptions="Start"
                Grid.Row="0"
                LineBreakMode="TailTruncation"
                Text="s{Binding CustomerName} HHHHHHHHH HHHHHHHHH HHHHHHHHHHH HHHHHHHHHHH"
                FontSize="16"/>

            <!-- second line -->
            <Label
                Grid.Row="1"
                Margin="0,0,16,16"
                VerticalOptions="Start"
                LineBreakMode="WordWrap"
                Text="x{Binding Notes}xxxxxxxx OO xxxxxxxxxxxHHHHH xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx xxxxxx 333333333333333333333"
                MaxLines="3"
                LineHeight="1"
                FontSize="12"
                BackgroundColor="Yellow"/>
        </Grid>

Screenshot 2023-09-06 at 13 31 09

anitatrifunovska on Sep 6, 2023