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
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.