Completed
Last Updated: 24 Jul 2019 08:41 by ADMIN
Chetan
Created on: 24 Jul 2019 08:38
Category: Ajax
Type: Bug Report
0
When AutoResizeHeight="true", RadEditor goes up when applying formatting over a word in Chrome

When AutoResizeHeight is set to true in Chrome, on Editing in the content area, the view jerks, for example, when I select some text and click bold the view moves up. This happens on and off. The requirement for an editor is not to change position of the text which is being edited, it distracts the user.

<telerik:RadEditor RenderMode="Lightweight" runat="server"
               
  AutoResizeHeight="true">
    <ContextMenus>
        <telerik:EditorContextMenu TagName="P">
            <telerik:EditorContextMenuTool Name="Formatting" IconCssClass="reBold">
                <Tools>
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                </Tools>
            </telerik:EditorContextMenuTool>
            <telerik:EditorTool Name="Superscript" />
            <telerik:EditorTool Name="Subscript" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorTool Name="FindAndReplace" />
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="H1">
            <telerik:EditorContextMenuTool Name="Formatting" IconCssClass="reBold">
                <Tools>
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                </Tools>
            </telerik:EditorContextMenuTool>
            <telerik:EditorTool Name="Superscript" />
            <telerik:EditorTool Name="Subscript" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorTool Name="FindAndReplace" />
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="A" Enabled="false">
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="IMG">
            <telerik:EditorTool Name="SetImageProperties" />
            <telerik:EditorTool Name="ImageMapDialog" />
        </telerik:EditorContextMenu>
    </ContextMenus>
    <Content>
                                    <p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p><p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
   
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
   
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
   
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
    </Content>
</telerik:RadEditor>

1 comment
ADMIN
Rumen
Posted on: 24 Jul 2019 08:41
Thank you for reporting this problem! It will be fixed in the upcoming R3 2019 release due in mid-September.

For the earlier versions, please find the fix highlighted below:

<script>
    Telerik.Web.UI.Editor.DomRange.prototype.scrollIntoView = function (selection) {
                  
        var scrollableNode = selection.anchorNode.parentNode;
  
                  
        if ((scrollableNode.tagName.toLowerCase() != "body" && scrollableNode.tagName.toLowerCase() != "html") && scrollableNode.scrollIntoViewIfNeeded) {
            scrollableNode.scrollIntoViewIfNeeded();
        }
    }
</script>
<telerik:RadEditor RenderMode="Lightweight" runat="server"
              
  AutoResizeHeight="true">
    <ContextMenus>
        <telerik:EditorContextMenu TagName="P">
            <telerik:EditorContextMenuTool Name="Formatting" IconCssClass="reBold">
                <Tools>
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                </Tools>
            </telerik:EditorContextMenuTool>
            <telerik:EditorTool Name="Superscript" />
            <telerik:EditorTool Name="Subscript" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorTool Name="FindAndReplace" />
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="H1">
            <telerik:EditorContextMenuTool Name="Formatting" IconCssClass="reBold">
                <Tools>
                    <telerik:EditorTool Name="Bold" />
                    <telerik:EditorTool Name="Italic" />
                    <telerik:EditorTool Name="Underline" />
                </Tools>
            </telerik:EditorContextMenuTool>
            <telerik:EditorTool Name="Superscript" />
            <telerik:EditorTool Name="Subscript" />
            <telerik:EditorTool Name="Undo" />
            <telerik:EditorTool Name="Redo" />
            <telerik:EditorTool Name="FindAndReplace" />
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="A" Enabled="false">
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="IMG">
            <telerik:EditorTool Name="SetImageProperties" />
            <telerik:EditorTool Name="ImageMapDialog" />
        </telerik:EditorContextMenu>
    </ContextMenus>
    <Content>
                                    <p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p><p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
  
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
  
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
  
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
<p>This is a plain text</p>
    </Content>
</telerik:RadEditor>


Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.