maui
maui copied to clipboard
dotnet
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
Hi @dimitar-sd. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md
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.
@hartez is this maybe fixed by https://github.com/dotnet/maui/pull/10279 and is a dupe of #5835?
@hartez is this maybe fixed by #10279 and is a dupe of #5835?
No, and no. Those PRs/issues are concerned with mixing things like truncation and multiple lines - this markup isn't doing that.
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.
We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.
@hartez this code is exactly the same as the code I have that works properly in Xamarin. Something has to be different between the two platforms.
@hartez this code is exactly the same as the code I have that works properly in Xamarin. Something has to be different between the two platforms.
Yes, the layout rules are slightly different from Forms. They're closer to other platforms which use a Grid layout (WPF, UWP, etc.).
And as I said, the TailTruncation thing is a bug that we need to fix.
I seem to be hitting a similar issue with WordWrap, also inside auto-sized Grid columns. Setting MaxLines to 0 and both VerticalOptions and HorizontalOptions to Fill does not resolve the issue on any platform (tested on Windows and Android).
If in first Column, I have FontIcon and in second column is a Label Text, then I could solve this problem by making the first column a Fixed width rather than Auto.
Ex:
Grid with "Auto, *" gives this issue but,
Grid with "40, *" works as expected and shows the label in second column as multiple lines with having LineBreakMode = WordWrap.
I know that this is kinda "overkill" but if you use a more complex Grid than from the MGohil example, It helps if you put a label to Frame or FlexLayout. Inside these two layouts "TailTruncation" works.
Verified this on Visual Studio Enterprise 17.7.0 Preview 1.0. Repro on Windows 11, Android 13.0-API33 and iOS 16.4 with provided project: 10494.zip
@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>
I've also seen this weird bug when fiddling with HorizontalOptions for labels.
The render updates correctly when a resize event occurs, which happens when the window is resized on a Desktop computer. Is there something to trigger this automatically/programmatically as a workaround? Since I can't do that on a fixed screen on my android device. I've fixed the column width of the column next to my label, but would have liked to keep it "Auto" for flexibility in the future.
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
WidthofAuto; 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 *.
Can you elaborate on this? What is the advantage of Auto having the ability to expand beyond the bounds of it's parent? I can't think of any use case in my coding for this, but many use cases for Auto to expand up to the bounds of it's parent. It is my understanding that * allocates space evenly, which is not a replacement for the behavior of Auto in Forms, What would be your suggestion to display a label that would wrap put not be in a space larger than itself?
@czuck From what I understand, the way that MAUI handles layouts differs from Xamarin Forms in that it handles things in a more deterministic fashion and requires you to be more explicit in your UI. For layouts such as HorizontalStackLayout, Xamarin Forms would implicitly make the assumption of filling the screen and performing a line break, similar to how * works here, once the label hit the screen width, but MAUI's auto will let the label exceed that width (like how WinUI handles things). So a constraint like a number for the width of the column needs to be specified in order for the line break to occur.
Please also see this doc page for more comparisons between the two frameworks' various layouts.
I tested this example and it looks like tail truncation now works properly when ColumnDefintions is set to *, regardless of what HorizontalOptions are set to. It will not truncate when ColumnDefintion is set to auto, as previously described.
That being said, there has been a lot of changes that have been the result of fixes done for layouts and label specifically that may result in previous workarounds not functioning as desired. I encourage everyone to continue submitting issues with reproductions we can run to see how we can help and what we need to address.
@dustin-wojciechowski I've reviewed the comparison document many times and it is not very detailed or helpful. When I open bugs that identify things that used to work in Forms but no longer work in MAUI I get the 'as designed' response with no indication of how to get the results I need, or if it is even possible. This is very frustrating. A bug I created was linked to this one and closed, which got me here. For example I had a page that used a StackLayout with an Orientation of Horizontal and the items in it had HorizontalOptions set to CenterAndExpand. I changed the layout to a HorizontalStackLayout and the Children's' HorizontalOptions to Center as recommended. The child elements were not centered. I created a bug report for a similar issue (#20952) the response was a HorizontalStackLayout does not honor HorizontalOptions, use a Grid. So I changed it to a Grid with ColumnDefinitions = ",Auto," which looked ok until I displayed a label that needed to wrap but won't because Auto has been changed in MAUI and is no longer constrained by the bounds of it's parent (#21110). The only advice I've gotten there is to change the column definition to * but I do not want 3 equal columns, I want the two outer columns to be equal width and the middle column to be the width of the content without extending past the viewable area. How do I accomplish this in MAUI?
@czuck have you looked into using proportional sizing using multipliers? For example, you can have proportional-sized columns for the left and right columns, and then use something like 2* to get twice the size of the other columns. So you would have something like ",2.*" Another option could be to use a fixed size for the middle column, although that may not be pertinent in your case.
Created an issue to address layout differences between frameworks to assist in migration: https://github.com/dotnet/docs-maui/issues/2164
Documenting this difference is good, but should only be a temporary solution. Ideally this bug would be fixed, so the behavior matches XF and WinUI.