Rg.Plugins.Popup: Problem with scroll view and custom label (for html text) on Android 7.0 with plugin version 1.1.0-pre3

Hi, i’ve a found a problem with a custom label inside an Rg.Popup. The text go out the margin of frame (this not verify in a standard label with same text lenght).

This is my xaml :

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:translator="clr-namespace:StandAloneIos.Helpers"
             xmlns:local="clr-namespace:StandAloneIos.Model"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             x:Class="StandAloneIos.InfoPrivacy">
    <StackLayout VerticalOptions="Start" HorizontalOptions="Center" Margin="0,30,0,0">
        <Frame CornerRadius="30" BackgroundColor="White" WidthRequest="500" HeightRequest="700">
            <ScrollView>
              <Grid BackgroundColor="Transparent" WidthRequest="500" HeightRequest="700" Margin="20,0,-53,0"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"  />
                    <RowDefinition Height="30"  />
                    <RowDefinition Height="30"  />
                    <RowDefinition Height="30"  />
                    <RowDefinition Height="30"  />
                    <RowDefinition Height="*"  />
                    <RowDefinition Height="20"  />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
              </Grid>
              <Label x:Name="lblInformation" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" Grid.RowSpan="3" HorizontalOptions="Start" FontSize="22" HorizontalTextAlignment="Start" ></Label>
              <local:HtmlLabel x:Name="lblBody" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="4" HorizontalOptions="Start" HorizontalTextAlignment="Start"  FontSize="22" ></local:HtmlLabel>
            </ScrollView>
        </Frame>
        <ContentView x:Name="contentForImage" IsVisible="True" Margin="0,100,0,0" HorizontalOptions="Center" VerticalOptions="End">

                     
            <Button Text="{translator:Translate InformationPopupLblBtnDone}" TextColor="Black" BackgroundColor="White" FontSize="20" BorderRadius="35" BorderWidth="1" WidthRequest="170" HeightRequest="70" Clicked="OnCloseButtonTapped" ></Button>
        </ContentView>
    </StackLayout>
</pages:PopupPage >

And this is .cs file :

using Plugin.Multilingual;
using Rg.Plugins.Popup.Pages;
using Rg.Plugins.Popup.Services;
using StandAloneIos.Helpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Resources;
using System.Text;
using System.Threading.Tasks;
using utupcl;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace StandAloneIos
{
	[XamlCompilation(XamlCompilationOptions.Compile)]
	public partial class InfoPrivacy : PopupPage
    {
        public InfoPrivacy()
        {
            InitializeComponent();
            this.CloseWhenBackgroundIsClicked = false;
            SettingInformationText();
        }


        private void SettingInformationText()
        {
            //string testo1 = "Lorem ipsum dolor sit amet, cu nec meis nemore nominati, legimus convenire id est, natum habemus mei in. At per debet scriptorem, eos ex utinam consulatu. Nulla ignota forensibus vel id. Vix in suas dolor, aeque harum dissentiet et eos. Vix vidisse laoreet ut. Cu mea regione salutatus, nec no cibo facilis maiestatis. Ne unum munere euripidis nam, et sea munere euismod postulant, id eum numquam nominavi scribentur.";
            //string testo2 = "Lorem ipsum dolor sit amet, cu nec meis nemore nominati, legimus convenire id est, natum habemus mei in. At per debet scriptorem, eos ex utinam consulatu. Nulla ignota forensibus vel id. Vix in suas dolor, aeque harum dissentiet et eos. Vix vidisse laoreet ut. Cu mea regione salutatus, nec no cibo facilis maiestatis. Ne unum munere euripidis nam, et sea munere euismod postulant, id eum numquam nominavi scribentur.";
            //string testo3 = "Lorem ipsum dolor sit amet, cu nec meis nemore nominati, legimus convenire id est, natum habemus mei in. At per debet scriptorem, eos ex utinam consulatu. Nulla ignota forensibus vel id. Vix in suas dolor, aeque harum dissentiet et eos. Vix vidisse laoreet ut. Cu mea regione salutatus, nec no cibo facilis maiestatis. Ne unum munere euripidis nam, et sea munere euismod postulant, id eum numquam nominavi scribentur.";
            var fs = new FormattedString();
            //fs.Spans.Add(new Span { Text = "Title\n", FontAttributes = FontAttributes.Bold, FontSize = 24, ForegroundColor = Color.Black });
            //fs.Spans.Add(new Span { Text = "Subtitle 1 \n\n", FontAttributes = FontAttributes.Bold, FontSize = 22, ForegroundColor = Color.LightGray });
            //fs.Spans.Add(new Span { Text = "Subtitle 2 \n\n", FontAttributes = FontAttributes.Bold, FontSize = 20, ForegroundColor = Color.Black });
            //fs.Spans.Add(new Span { Text = "1. BLa bla bla \n\n", FontAttributes = FontAttributes.Bold, FontSize = 20, ForegroundColor = Color.Black });
            //fs.Spans.Add(new Span { Text = testo1 + "\n\n", FontSize = 20 });
            //fs.Spans.Add(new Span { Text = "2. BLa bla bla \n\n", FontAttributes = FontAttributes.Bold, FontSize = 20, ForegroundColor = Color.Black });
            //fs.Spans.Add(new Span { Text = testo2 + "\n\n", FontSize = 20 });
            //fs.Spans.Add(new Span { Text = "3. BLa bla bla \n\n", FontAttributes = FontAttributes.Bold, FontSize = 20, ForegroundColor = Color.Black });
            //fs.Spans.Add(new Span { Text = testo3 + "\n\n", FontSize = 20 });

            //lblInformation.FormattedText = fs;
            string terms = string.Empty;

            try
            {
                string startTagHmtlPageTitle = string.Format("<b><p style ='color:{0};font-size:{1}px'>", "black", "24");
                string startTagHmtlPageSubTitle1 = string.Format("<b><p style ='color:{0};margin-top:-150px;font-size:{1}px'>", "lightgray", "22");
                string startTagHmtlPageSubTitle2 = string.Format("<b><p style ='color:{0};margin-top:-150px;font-size:{1}px'>", "black", "20");
                string endTagHmtl = "</p></b>";

                string titlePage = startTagHmtlPageTitle + "Title" + endTagHmtl;
                string subTitle1Page = startTagHmtlPageSubTitle1 + "SubTitle1" + endTagHmtl;
                string subTitle2Page = startTagHmtlPageSubTitle2 + "SubTitle2" + endTagHmtl;

                string loreipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum";

                terms = "<br>" + titlePage + subTitle1Page + subTitle2Page + "<br>" + loreipsum + "<br>" + loreipsum + "<br>" + loreipsum + "<br>" + loreipsum;
            }
            catch (Exception ex)
            {
                terms = "Terms And Condition not found at service";
            }


            lblInformation.FormattedText = fs;
            lblBody.Text = terms;
        }

        private void OnCloseButtonTapped(object sender, EventArgs e)
        {
            PopupNavigation.PopAsync();
        }
    }
}

//if you want uncomment the fs text setting and comment body label you can see that with standard label all works fine

Custom label is on folder named model :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace StandAloneIos.Model
{
    public class HtmlLabel : Label
    {

    }
}

And on android project i use this renderer:

public class HtmlLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control != null && Element != null && !string.IsNullOrWhiteSpace(Element.Text))
            {
                var attr = new NSAttributedStringDocumentAttributes();
                var nsError = new NSError();
                attr.DocumentType = NSDocumentType.HTML;

                //var myHtmlData = NSData.FromString(Element.Text, NSStringEncoding.Unicode);

                UIKit.UIFont font = Control.Font;
                nfloat r, g, b, a;
                Control.TextColor.GetRGBA(out r, out g, out b, out a);
                var textColor = string.Format("#{0:X2}{1:X2}{2:X2}", (int)(r * 255.0), (int)(g * 255.0), (int)(b * 255.0));
                var fontName = font.Name;
                var fontSize = font.PointSize;
                var htmlContents = "<span style=\"font-family: '" + fontName + "'; color: " + textColor + "; font-size: " + fontSize + "\">" + Element.Text + "</span>";
                var myHtmlData = NSData.FromString(htmlContents, NSStringEncoding.Unicode);

                Control.Lines = 0;
                Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError);
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == Label.TextProperty.PropertyName)
            {
                if (Control != null && Element != null && !string.IsNullOrWhiteSpace(Element.Text))
                {
                    var attr = new NSAttributedStringDocumentAttributes();
                    var nsError = new NSError();
                    attr.DocumentType = NSDocumentType.HTML;

                    //var myHtmlData = NSData.FromString(Element.Text, NSStringEncoding.Unicode);

                    UIKit.UIFont font = Control.Font;
                    nfloat r, g, b, a;
                    Control.TextColor.GetRGBA(out r, out g, out b, out a);
                    var textColor = string.Format("#{0:X2}{1:X2}{2:X2}", (int)(r * 255.0), (int)(g * 255.0), (int)(b * 255.0));
                    var fontName = font.Name;
                    var fontSize = font.PointSize;
                    var htmlContents = "<span style=\"font-family: '" + fontName + "'; color: " + textColor + "; font-size: " + fontSize + "\">" + Element.Text + "</span>";
                    var myHtmlData = NSData.FromString(htmlContents, NSStringEncoding.Unicode);

                    Control.Lines = 0;
                    Control.AttributedText = new NSAttributedString(myHtmlData, attr, ref nsError);
                }
            }
        }
    }

I find it on xamarin community forums : https://forums.xamarin.com/discussion/56484/need-to-put-html-into-a-label.

I try to put inside a Grid but it’s the same wihout, The problem is that using the CustomLabel the text goes out of the frame instead of remaining confined to the scrollview

Thanks in advance, Nicola

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 16 (5 by maintainers)

Most upvoted comments

Incredible, i solved setting to true the “IsClippedToBound” property on the scrollview.