Bug 27853 - iOS/Android: ViewCell truncates label in horizontal StackLayout
Summary: iOS/Android: ViewCell truncates label in horizontal StackLayout
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 1.4.4
Hardware: Other Other
: Normal minor
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2015-03-10 19:16 UTC by david
Modified: 2016-04-08 18:56 UTC (History)
6 users (show)

Tags: all visual listview viewcell AC ngf
Is this bug a regression?: ---
Last known good build:

Sample to illustrate the problem (4.97 MB, application/zip)
2015-03-10 19:16 UTC, david

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description david 2015-03-10 19:16:12 UTC
Created attachment 10254 [details]
Sample to illustrate the problem

In a ViewCell I have two labels side-by-side in a horizontal StackLayout. The ListView has HasUnevenRows == true.

On the left I have a small title label; on the right I have a large auto-expanding, word-wrapped label that contains a lot of text.

The large-text label resizes and shows all content, and causes the ViewCell to expand to match.

The small label gets truncated unless I set its MinimumWidthRequest.
Setting its WidthRequest has no effect.
Setting its WidthRequest and MinimumWidthRequest uses the WidthRequest value and the two labels are nicely aligned.

The enclosed test solution demonstrates the issue. Please see the file "BaseCell.cs", lines 18 & 19. If you uncomment the MinimumWidthRequest line, the small title label does not get truncated. This is what I believe should be the correct result.

If you also uncomment the WidthRequest line, the labels line up as if in columns using the WidthRequest value as the width of the small title label. This is what I believe should happen when only setting the WidthRequest.

The problem occurs on both iOS and Android.
Comment 1 david 2015-03-11 01:21:49 UTC
FWIW the problem occurs outside the ViewCell environment too. I've tried the following in a Sketch:

using Xamarin.Forms;

var layout = new StackLayout {
	BackgroundColor = Color.Transparent,
	Padding = new Thickness(0,20,0,0),
	Children = {
		new StackLayout {
			Orientation = StackOrientation.Horizontal,
			Children = {
				new Label {
					Text = "TEST",
					HorizontalOptions = LayoutOptions.Start,
					//MinimumWidthRequest = 60,
				new Label {
					Text = "This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test ",
					LineBreakMode = LineBreakMode.WordWrap,

RootPage.Children.Add(new ContentPage {
	Content = layout

and observed exactly the same results.
Comment 2 Abhishek 2015-03-13 14:20:19 UTC
I have tried this issue and able to reproduce the reported behavior at my end.

Steps To Reproduce:
1. Download the Sample application attached above.
2. Run the application on Emulator/Simulator.
3. Observe that small cell truncated.
4. In "BaseCell.cs", lines 18 & 19. If I uncomment the MinimumWidthRequest line and comment out WidthRequest line ,
the small title label does not get truncated.
5. Again, If I uncomment the WidthRequest line and comment out the MinimumWidthRequest line,the small title label get truncated.

Screencast: http://www.screencast.com/t/LMlVHID9w
IOS Device Log: https://gist.github.com/AkhileshKumar01/9ef2b8f0acf457e37d02
IDE log: https://gist.github.com/AkhileshKumar01/911e0ea8fc898ff21d8a

Build Info:


=== Xamarin Studio ===

Version 5.9 (build 212)
Installation UUID: 93e693b0-b53d-40f4-b29c-b61ff5cbe892
	Mono 4.0.0 ((detached/3b18a06)
	GTK+ 2.24.23 (Raleigh theme)

	Package version: 400000062

=== Apple Developer Tools ===

Xcode 6.2 (6776)
Build 6C131e

=== Xamarin.Android ===

Version: (Enterprise Edition)
Android SDK: /Users/xamarin23/Desktop/android-sdk-macosx
	Supported Android versions:
		2.3    (API level 10)
		4.0.3  (API level 15)
		4.1    (API level 16)
		4.2    (API level 17)
		4.3    (API level 18)
		4.4    (API level 19)
		4.4.87 (API level 20)
		5.0    (API level 21)
Java SDK: /usr
java version "1.7.0_71"
Java(TM) SE Runtime Environment (build 1.7.0_71-b14)
Java HotSpot(TM) 64-Bit Server VM (build 24.71-b01, mixed mode)

=== Xamarin Android Player ===

Version: Unknown version
Location: /Applications/Xamarin Android Player.app

=== Xamarin.iOS ===

Version: (Enterprise Edition)
Hash: 63857ac
Branch: master
Build date: 2015-03-13 09:58:19-0400

=== Xamarin.Mac ===

Version: (Enterprise Edition)

=== Build Information ===

Release ID: 509000212
Git revision: 482e8b2c0cb5f1d7c9b0e06d2c5030fbaaa65859
Build date: 2015-03-12 12:15:42-04
Xamarin addins: d5276b9c69b0cc42f2bac6f30f741b1761b7e125

=== Operating System ===

Mac OS X 10.10.0
Darwin 800BC.local 14.0.0 Darwin Kernel Version 14.0.0
    Fri Sep 19 00:26:44 PDT 2014
    root:xnu-2782.1.97~2/RELEASE_X86_64 x86_64
Comment 3 Rui Marinho 2015-07-29 10:16:09 UTC
Hi, after analysing this issue we can conclude this is not a bug, what is happening using a stack layout is since the sum of all children request width is bigger that the available width, the stacklayout proportionally reduces each label in order to fit them both.

To achieve the UI you want you could try use grid.

>			var grid = new Grid ();
>			grid.ColumnDefinitions.Add (new ColumnDefinition { Width = GridLength.Auto });
>			grid.ColumnDefinitions.Add (new ColumnDefinition ());
>			Grid.SetColumn (label2, 1);
>			grid.Children.Add (label);
>			grid.Children.Add (label2);
Comment 4 david 2015-07-30 08:16:43 UTC
I'm not convinced. This is an edge case whose implementation doesn't match the way users of Xamarin.Forms will think about how it should work.

Here's my reasoning:

1. The ListView has HasUnevenRows == true. Therefore I expect its Cells to expand vertically to fit their content.

2. The small Label has a WidthRequest, while the large Label does not. Therefore I expect the small Label's width to be prioritised over the large one.

3. The large Label has been set up for this to occur by setting its LineBreakMode to LineBreakMode.WordWrap to allow multi-line content. Therefore I expect that the large Label will expand vertically to fit its content.

To summarise the reasoning:

- I set the large Label to allow multi-line content. 
- I set the WidthRequest on the small Label to ensure it has a definite size. 
- I set the Cell to auto-expand vertically to accommodate the anticipated vertical expansion of the multi-line Label. 
=> I expect that the large Label will squish horizontally and expand vertically as required, and cause the Cell to expand to match, and that the small Label will have a consistent width in all Cells.

However, as I found out by experimenting, the only way to achieve the result I wanted was to set the MinimumWidthRequest property of the small Label. The framework effectively ignores my WidthRequest unless I do this.

I do not think it's good behaviour on the part of the framework to promote its own size calculations to equal priority with user requests. If the programmer has gone to the trouble of requesting a width, the framework should do its best to honour that request by adjusting the other items to suit.

I agree that I could have achieved the required behaviour with a Grid. But I chose a StackLayout. The documentation states that the default value of a View's HorizontalOptions is LayoutOptions.Fill, NOT LayoutOptions.FillAndExpand. I do not expect any proportional resizing in this case because that is only supposed to occur if _multiple_ items have their HorizontalOptions set to LayoutOptions.FillAndExpand. Or at least, that's what it says in the documentation.
Comment 5 Jason Smith [MSFT] 2016-04-08 18:56:02 UTC
We have no intention currently to change this behavior.