RichTextEditor with endless height

1 Answer 64 Views
RichTextEditor
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 23 Jun 2023, 12:30 PM

Here is my first try with the RichTextEditor where the editor and toolbox are created using C# code:

 <VerticalStackLayout x:Name="VSL" VerticalOptions="Fill" Padding="2">
    
 </VerticalStackLayout>

 Grid grd = new Grid
        {
            RowDefinitions =
                        {
                            new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) },
                            new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
                        },
            ColumnDefinitions =
                        {
                            new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) }
                        },
            VerticalOptions = LayoutOptions.Fill,
            HorizontalOptions = LayoutOptions.Fill
        };
        RadRichTextEditor rte = new()
        {
            Source = RichTextSource.FromString("<b>Hello .NET Maui</b>"),
            BorderThickness = new Thickness(1),
            BorderColor = Colors.Red,
            VerticalOptions = LayoutOptions.Fill,
            HorizontalOptions = LayoutOptions.Fill
        };
        RadRichTextEditorToolbar rtet = new()
        {
            HeightRequest = 60,
            RichTextEditor = rte,
            AutoGenerateItems = true
        };

        grd.Add(rtet, 0, 0);
        grd.Add(rte, 0, 1);
        VSL.Add(grd);

A problem arises. The editor is slowly built up vertically when the page is called up. But this construction does not end and the height of the editor becomes almost infinite.
If I give a fixed value for HeightRequest instead of VerticalOptions = Fille then the behavior is ok.
What's wrong with my code?

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 23 Jun 2023, 05:25 PM

Hi Rolf,

The problem is because of using a VerticalStackLayout as the root of the page (and ultimately a parent of the RichTextEditor). This will always break any internal ScrollView. This is why we warn you that is you put the ListView, DataGrid, PdfViewer, RichTextEditor, etc... inside a parent that has no height or infinity height, it will be a problem because it either squeezes to 0 height... or provides infinite height and breaks UI virtualization).

To fix this, make sure you use a Grid as the root element and never put another control with an internal ScrollView inside a RowDefinition with auto height. Here's the ideal layout for what I see in your code

<ContentPage>
  <Grid RowDefinitions="Auto, *">
<!-- This doesn't have an internal vertical scrollview, so it can be placed in a Auto-sized row definition -->
    <RichTextEditorToolbar Grid.Row="0" />

<!-- This one is in the star-sized RowDefinition, which supports child content with a scrollview -->
    <RichTextEditor Grid.Row="1" />
  </Grid>
</ContentPage>

To learn more, or see alternate solution, please visit this documentation https://docs.telerik.com/devtools/xamarin/troubleshooting/controls-are-not-appearing (don't worry that it is in the Xamarin docs, the same concept applies to any XAML UI).

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
RichTextEditor
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or