Bug 52311 - Labels not rendered (wrapped/truncated) when in ScrollView
Summary: Labels not rendered (wrapped/truncated) when in ScrollView
Status: RESOLVED NORESPONSE
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.4
Hardware: PC Windows
: Normal normal
Target Milestone: ---
Assignee: Paul DiPietro [MSFT]
URL:
Depends on:
Blocks:
 
Reported: 2017-02-04 13:55 UTC by Philipp Sumi
Modified: 2017-09-06 05:39 UTC (History)
3 users (show)

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


Attachments
Wrong behavior: Label spilling over it's parent border (115.02 KB, image/png)
2017-02-04 13:57 UTC, Philipp Sumi
Details
Correct behavior: Label applying word wrap (137.91 KB, image/png)
2017-02-04 13:57 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-02-04 13:55:47 UTC
I have a weird issue with labels wrapped in container hierarchy (chat bubbles) that are rendered within a ScrollView. During intialization, I programmatically scroll down to the latest item, which then most often doesn't render the message label correctly - it spills just over the visible area (see screenshot).

As soon as a re-rendering is triggered (e.g. because the keyboard opens), the label is properly rendered (2nd screenshot).



Here's my item template:

<?xml version="1.0" encoding="UTF-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
          xmlns:controls="clr-namespace:Ridr.Client.Controls;assembly=Ridr.Client"
          x:Class="Ridr.Client.Views.Fragments.Chat.IncomingChatBubble">

    <Grid ColumnSpacing="0"
          BackgroundColor="{StaticResource ListViewBackgroundColor}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <iconize:IconLabel Text="fa-caret-left"
                           TextColor="{StaticResource ReceivedChatBubbleBackground}"
                           FontSize="18"
                           VerticalOptions="Center"
                           Margin="0,0,-1,0"
                           Grid.Column="0" />

        <controls:RoundedBorder x:Name="MessageBorder"
                                Grid.Column="1"
                                CornerRadius="8"
                                HorizontalOptions="Start"
                                Margin="0,10,40,10"
                                BackgroundColor="{StaticResource ReceivedChatBubbleBackground}">
            <StackLayout Padding="{StaticResource MediumPadding}" Spacing="0">

                <!-- show sender name only if specified -->
                <Label Text="{Binding SenderName}"
                       IsVisible="{Binding SenderName, Converter={StaticResource StringToBoolConverter}}"
                       FontSize="{StaticResource SmallHintFontSize}"
                       TextColor="{StaticResource PrimaryDark}" />
                
                <Label Text="{Binding Message}"
                       LineBreakMode="WordWrap"
                       FontSize="{StaticResource IncreasedFontSize}"
                       TextColor="Black"
                       Margin="0,2,0,6" />
                <Label Text="{Binding TimestampText}"
                       FontSize="{StaticResource SmallHintFontSize}"
                       HorizontalOptions="End" />
            </StackLayout>
        </controls:RoundedBorder>
    </Grid>
</ContentView>
Comment 1 Philipp Sumi 2017-02-04 13:57:03 UTC
Created attachment 19722 [details]
Wrong behavior: Label spilling over it's parent border
Comment 2 Philipp Sumi 2017-02-04 13:57:42 UTC
Created attachment 19723 [details]
Correct behavior: Label applying word wrap
Comment 3 Philipp Sumi 2017-02-04 14:05:28 UTC
I found a fix for this: My bubbles were rendered as Grid rows. If I switch them over to be rendered within a StackLayout, the issue seems to be gone. I have a déja-vu that label rendering and grids have been discussed in the forums, so there may be a more generic description/repro.
Comment 4 Paul DiPietro [MSFT] 2017-03-17 16:19:31 UTC
Do you feel this particular issue should be closed, then, if you have a personal fix? Alternatively, if any bugs exist that seem similar to what you experienced, we can cross-reference them.
Comment 5 Paul DiPietro [MSFT] 2017-06-15 16:47:13 UTC
Closing this as part of bug upkeep due to no response, so we will reasonably assume this is no longer an issue for you.
Comment 6 Nishant Gaurav 2017-09-06 05:39:18 UTC
This is cool stuff, http://mxbpointcodes.com