Telerik UI for Xamarin: How to prevent iOS keyboard from pushing up the entire screen when editing Rich Text Editor.

[Jeruel]

The entire screen for iOS is pushing up the entire screen when editing Rich Text Editor with the keyboard popped out, making the toolbar not accessible anymore.

The first attached picture is without the keyboard popped out, and the second picture is with keyboard.

This issue is only applicable for iOS devices, android devices work fine. Is there some way to work around this issue? Thanks.

[Jeruel]

Here is my xaml code:

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
    xmlns:telerikRichTextEditor="clr-namespace:Telerik.XamarinForms.RichTextEditor;assembly=Telerik.XamarinForms.RichTextEditor">    
    <ContentPage.Resources>
        <Color x:Key="ToolbarColor">#007F0E</Color>
        <Style TargetType="telerikRichTextEditor:RichTextEditorToolbarItem" x:Key="RichTextEditorToolbarItemStyle">
            <Setter Property="TextColor" Value="{StaticResource ToolbarColor}"/>
            <Setter Property="SelectedBackgroundColor" Value="{StaticResource ToolbarColor}"/>
            <Setter Property="SelectedColor" Value="White"/>
            <Setter Property="CheckedBackgroundColor" Value="{StaticResource ToolbarColor}"/>
            <Setter Property="CheckedColor" Value="White"/>
        </Style>
        <Style TargetType="telerikRichTextEditor:PickerToolbarItem" BasedOn="{StaticResource RichTextEditorToolbarItemStyle}" ApplyToDerivedTypes="True">
            <Setter Property="ItemStyle">
                <Setter.Value>
                    <Style TargetType="telerikDataControls:NonVirtualizedItemsControlItemContainer">
                        <Setter Property="TextColor" Value="{StaticResource ToolbarColor}"/>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="telerikRichTextEditor:RichTextEditorToolbarItem" BasedOn="{StaticResource RichTextEditorToolbarItemStyle}" ApplyToDerivedTypes="True"/>
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid
            ColumnSpacing="0"
            HorizontalOptions="FillAndExpand"
            RowSpacing="0"
            VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <template:NavigationBarTemplate
                Grid.Row="0"
                PageTitle="{Binding PageTitle}"
                IsToolbarEnabled="True"
                ClosePageCommand="{Binding CloseModalCommand}"
                ToolbarCommand="{Binding SaveNoteCommand}"
                ToolbarImageSource="save.png"/>
            <telerikRichTextEditor:RadRichTextEditorToolbar 
                x:Name="richTextToolbar" 
                RichTextEditor="{x:Reference richTextEditor}" 
                Grid.Row="1"
                AutoGenerateItems="False">
                <telerikRichTextEditor:FontFamilyToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf031;"/>
                <telerikRichTextEditor:FontSizeToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf034;"/>
                <telerikRichTextEditor:BoldToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf032;"/>
                <telerikRichTextEditor:ItalicToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf033;"/>
                <telerikRichTextEditor:UnderlineToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf0cd;"/>
                <telerikRichTextEditor:BulletingToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf0ca;"/>
                <telerikRichTextEditor:NumberingToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf0cb;"/>
                <telerikRichTextEditor:IndentToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf03c;"/>
                <telerikRichTextEditor:OutdentToolbarItem FontFamily="{StaticResource FontAwesome}" Text="&#xf03b;" />
            </telerikRichTextEditor:RadRichTextEditorToolbar>
            <telerikRichTextEditor:RadRichTextEditor x:Name="richTextEditor" Grid.Row="2" Source="{Binding Body}" PropertyChanged="richTextEditor_PropertyChanged"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

[Didi]

Hello Jeruel,

Thank you for the provided code and images.

I have tested our SDK Getting Started example and the toolbar is still visible when the keyboard is displayed. I have created a sample to test the code you have attached and no issues with the Toolbar. Please download the attached file and test it on your side. I have tested on iPhone SE 2020 read device 14.1 and simulator 14.0. 

Note that I have replaced the template:NavigationBarTemplate control with a Label, as I am not aware of how the NavigationBar is implemented.

We have a section in our documentation about the RichTextEditor Toolbar placement. Please check the following link https://docs.telerik.com/devtools/xamarin/controls/richtexteditor/richtexteditor-toolbar#richtexteditor-toolbar-placement 

Additional information:

- versions of Telerik and Xamarin.Forms used

- on which iPhone simulator, real-device version the issue can be reproduced.

Next Steps:

If the issue cannot be reproduced in the attached project. Please modify it according to your specific setup and send it back to us. You should open a support ticket and attach the project there, as in the forum only image attachments are allowed. 

You can also try to position the Toolbar under the RichTextEditor control and check whether this will solve the behavior on your side. For example:

 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Label Text="regterwtgerwtgtretg"/>
    <telerikRichTextEditor:RadRichTextEditor x:Name="richTextEditor" Grid.Row="0" />
    <telerikRichTextEditor:RadRichTextEditorToolbar Grid.Row="1" x:Name="richTextToolbar" RichTextEditor="{x:Reference richTextEditor}" />
</Grid>

 

I look forward to your reply.

Regards,
Didi
Progress Telerik