Bug 51188 - Label character count somehow affects height of containing grid
Summary: Label character count somehow affects height of containing grid
Status: RESOLVED NORESPONSE
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.3
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Stephane Delcroix
URL:
Depends on:
Blocks:
 
Reported: 2017-01-03 12:36 UTC by Philipp Sumi
Modified: 2017-06-19 20:12 UTC (History)
3 users (show)

Tags:
Is this bug a regression?: ---
Last known good build:


Attachments
Long text (115.67 KB, image/png)
2017-01-03 12:36 UTC, Philipp Sumi
Details
Medium text (120.82 KB, image/png)
2017-01-03 12:37 UTC, Philipp Sumi
Details
Short text (124.11 KB, image/png)
2017-01-03 12:38 UTC, Philipp Sumi
Details
Using button instead of label (works) (138.51 KB, image/png)
2017-01-03 13:44 UTC, Philipp Sumi
Details


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:
Status:
RESOLVED NORESPONSE

Description Philipp Sumi 2017-01-03 12:36:32 UTC
Created attachment 19065 [details]
Long text

One of the weirdest issues I've seen in Xamarin Forms so far - I have a simple Grid that contains the input controls for a chat interface (input and send button). Now, for the test, I only have a label and the button there:

            <Grid ColumnSpacing="0"
                  Padding="{StaticResource StandardPadding}"
                  VerticalOptions="End">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Label Text="Tap..."
                       BackgroundColor="Aqua"
                       Margin="4,0,0,0"
                       Opacity="0.6"
                       InputTransparent="True"
                       FontSize="{StaticResource IncreasedFontSize}"
                       IsVisible="{Binding ChatViewModel.ShowPlaceholder}"
                       VerticalOptions="Center"
                       HorizontalOptions="Fill"
                       Grid.Column="0" />

                <controls:CircleIconButton x:Name="Send"
                                           ButtonSize="Small"                                           
                                           Margin="{StaticResource MediumSpacingLeft}"
                                           HorizontalOptions="End"
                                           IconKey="fa-paper-plane"
                                           VerticalOptions="Center"
                                           Command="{Binding ChatViewModel.SubmitMessageCommand}"
                                           Grid.Column="1" />
            </Grid>


The weird thing here is that the Label control being present affects the height of the grid, while others (e.g. an Editor) don't. Also, the number of characters causes the height to vary. Just look at the attachments - the only difference in the code is the actual Label text. I don't have a logical explanation for this...
Comment 1 Philipp Sumi 2017-01-03 12:37:31 UTC
Created attachment 19067 [details]
Medium text

Shorter text causes height to change although it easily fits on the same line and the label height (as indicated by the background) is still the same.
Comment 2 Philipp Sumi 2017-01-03 12:38:41 UTC
Created attachment 19069 [details]
Short text

Very short text. This not only uses less vertical space (but still way too much), but is also aligned differently to add a bit to the WTF ;)
Comment 3 Philipp Sumi 2017-01-03 13:42:59 UTC
Ah yes, the settings on the label don't affect the faulty rendering. It's the same outcome with a Label such as this:

    <Label Text="Tap again..." Grid.Column="0" />

While using a Button for example, works. I'll add a screenshot for this one:

    <Button Text="Tap again 3..." Grid.Column="0" />
Comment 4 Philipp Sumi 2017-01-03 13:44:28 UTC
Created attachment 19071 [details]
Using button instead of label (works)

Adding a simple button instead of a label resolves the issue. There really seems to be something broken in the rendering of that control in that particular scenario (I have tons of other labels in a nearly finished app):

<Button Text="Tap again 3..." Grid.Column="0" />
Comment 5 Stephane Delcroix 2017-02-15 12:19:44 UTC
Using a Button instead of the CircleIconButton and packing that in a StackLayout, we can not observe the behavior you reported.

It seems like the CircleIconButton requests, at Measure pass, way more space than it requires at Layout pass, so the Label is measured in multi lines.

Please provide a complete solutions showcasing this issue, ideally not depending on anything by Core controls.

In the meantime, setting the Label LineBreakMode should prevent this to happen.
Comment 6 Philipp Sumi 2017-05-25 14:56:32 UTC
I'm afraid I don't have a sample anymore - I refactored that code months ago to work around the issue. Feel free to drop this.

As far as using a button goes, I stated in comment 4 that a Button resolves the issue. The CircleIconButton actually is nothing but two Labels (Icon Fonts).
Comment 7 Stephane Delcroix 2017-06-19 20:12:04 UTC
Closing as suggested in #c6