Radeditor ignoring initial height value

[Amy]

Hi,

I'm running into an issue where a radeditor seems to be ignoring the initial height specified, and only updates to the correct height after a post back to the page.  When I look at the page source, I notice the height is set to 286px even though in the aspx page I have it set to be 250px.

Here's the code from the aspx page:

<telerik:RadEditor ID="re1" runat="server" Skin="Office2010Silver" Width="98%" Height="200px"
                TabIndex="10" ToolsFile="~/Content/toolbarContent.xml"
                EditModes="Design, HTML" ContentAreaCssFile="~/Content/cssEditorGray.min.css"
                ToolbarMode="Default" StripFormattingOptions="MSWordRemoveAll"  />

Here's the line from the page source when I initially access the page:
<div id="ctl00_MainContent_iContent_re1" class="RadEditor Office2010Silver reWrapper" style="height: 286px; width: 98%;" tabindex="10">

Here's the line after I click a button on the page which does a post back:
<div id="ctl00_MainContent_iContent_re1" class="RadEditor Office2010Silver reWrapper" style="height:200px;width:98%;" tabindex="10">

This issue has just started happening in the past few months and was not always like this.  

Please let me know what further information I can provide to assist in resolving this issue.
Thank you!!

[Princy]

Hi Amy,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet and attached screenshots. Can you please mention Telerik version, I tried with Latest vesrion Q2 2014. 

Content Page:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadEditor ID="re1" runat="server" Skin="Office2010Silver" Width="98%" Height="200px" TabIndex="10" EditModes="Design, HTML" ToolbarMode="Default" StripFormattingOptions="MSWordRemoveAll">
    </telerik:RadEditor">
</asp:Content>

Thanks,
Princy.

[Amy]

Hi Princy,

We're using version 2014.1.225.35, but just upgraded to version 2014.2.724.35, and the problem still exist.  I think we've narrowed down the cause, but aren't sure why it's happening.

Our page has a radsplitter that divides the top and bottom part of the page.  In the bottom part of the page we have another radsplitter that divides the bottom part of the page into left and right panes.  We've discovered the issue is caused by having the width set in pixels on the pane that does not contain the radeditors and no width set on the pane that does contain the radeditors.

The radeditors display fine under the following scenarios:
--  both panes have a width in either pixels or percentage
--  only the pane with the editors has a width in either pixels or percentage
--  neither pane has a width specified
--  the pane without the editors has a width set in percentage

I'm including below a test page I created that is a stripped down version of our real page.  

Can you provide any insight as to why this issue is happening?  The radeditors do size properly upon post back; it's only on the initial page load that this issue occurs.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/TDS.Master" CodeBehind="Test.aspx.vb" Inherits="TestDevelopment.Test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Test page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="AdditionalScripts" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PageTitle" runat="server">
    Test page
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="BlackMetroTouch" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1" >
        <AjaxSettings>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal"
        Skin="Office2010Silver" Height="1500px" Width="100%" VisibleDuringInit="false">
        <telerik:RadPane ID="rpInfo" runat="server" Height="55px" Width="100%">

        </telerik:RadPane>
        <telerik:RadPane ID="TopPane" runat="server" Scrolling="None" Height="325px">
            <telerik:RadSplitter ID="rsTopSplitter" runat="server" Skin="Office2010Silver" Height="325px">
                <telerik:RadPane ID="rpTopLeft" runat="server" Scrolling="None" Width="400px">

                </telerik:RadPane>
                <telerik:RadSplitBar ID="rsbTop" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="rpTopRight" runat="server" Scrolling="None">

                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="BigHorizontal" runat="server" CollapseMode="Forward" />
        <telerik:RadPane ID="BottomPane" runat="server" Scrolling="None">
            <telerik:RadSplitter ID="RadSplitter2" runat="server" Skin="Office2010Silver">
                <telerik:RadPane ID="rpBottomLeft" runat="server" Width="400px">

                </telerik:RadPane>
                <telerik:RadSplitBar ID="Vertical" runat="server" CollapseMode="Forward" />
                <telerik:RadPane ID="rpBottomRight" runat="server" Scrolling="Y">
                    <table >
                        <tr>
                            <td>
                                <asp:Label ID="lbl1" runat="server" Font-Bold="true" Text="re1" />
                            </td>
                        </tr>
                        <tr>
                            <td >
                                <telerik:RadEditor ID="re1" runat="server" Skin="Office2010Silver" Width="98%" Height="150px"
                                    TabIndex="10" ToolsFile="~/Content/toolbarContent.xml"
                                    EditModes="Design, HTML" ToolbarMode="Default" StripFormattingOptions="MSWordRemoveAll"  />
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="lbl2" runat="server" Font-Bold="true" Text="re2" />
                            </td>
                        </tr>
                        <tr>
                            <td class="full">
                                <telerik:RadEditor ID="re2" runat="server" Skin="Office2010Silver" Width="98%" Height="150px"
                                    TabIndex="11" ToolsFile="~/Content/toolbarContent.xml"
                                    EditModes="Design, HTML" ToolbarMode="Default" StripFormattingOptions="MSWordRemoveAll" />
                                <br />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="lbl3" runat="server" Font-Bold="true" Text="re3" />
                            </td>
                        </tr>
                        <tr>
                            <td class="full">
                                <telerik:RadEditor ID="re3" runat="server" Skin="Office2010Silver" Width="98%" Height="150px"
                                    TabIndex="12" ToolsFile="~/Content/toolbarContent.xml" ToolbarMode="Default"
                                    StripFormattingOptions="MSWordRemoveAll" EditModes="Design, HTML" />
                                <br />
                            </td>
                        </tr>
                    </table>
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>
    <telerik:RadScriptBlock ID="rsb2" runat="server">
        <script language="javascript" type="text/javascript">

            Telerik.Web.UI.Editor.CommandList["AlignLeft"] = function (commandName, editor, args) {
                if (editor.getSelectionHtml() !== "") {
                    var content = editor.getSelectionHtml();
                    editor.pasteHtml("<div style='text-align: Left;'>" + content + "</div>");
                    args.set_cancel(true);
                }
                else {
                    alert("Please, select some text!");
                    args.set_cancel(true);
                }
            };

            Telerik.Web.UI.Editor.CommandList["AlignCenter"] = function (commandName, editor, args) {
                if (editor.getSelectionHtml() !== "") {
                    var content = editor.getSelectionHtml();
                    editor.pasteHtml("<div style='text-align: Center;'>" + content + "</div>");
                    args.set_cancel(true);
                }
                else {
                    alert("Please, select some text!");
                    args.set_cancel(true);
                }
            };

            Telerik.Web.UI.Editor.CommandList["AlignRight"] = function (commandName, editor, args) {
                if (editor.getSelectionHtml() !== "") {
                    var content = editor.getSelectionHtml();
                    editor.pasteHtml("<div style='text-align: Right;'>" + content + "</div>");
                    args.set_cancel(true);
                }
                else {
                    alert("Please, select some text!");
                    args.set_cancel(true);
                }
            };

            Telerik.Web.UI.Editor.CommandList["EquationEditor"] = function (commandName, editor, args) {
                var elem = editor.getSelectedElement(); //returns the selected element.

                if (elem.tagName === "IMG") {
                    editor.selectElement(elem);
                    argument = elem;
                }
                else {
                    var content = editor.getSelectionHtml();
                    var link = editor.get_document().createElement("A");
                    link.innerHTML = content;
                    argument = link;
                }

                var myCallbackFunction = function (sender, args) {
                    editor.pasteHtml(String.format("<img title='{0}' src='{1}' alt='{2}' style='vertical-align: middle;' />", args.title, args.src, args.alt))
                }

                editor.showExternalDialog
                (
                'path_removed_for_security_reasons',
                argument,
                    660,
                    420,
                myCallbackFunction,
                null,
                'Equation Editor',
                true,
                Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                false,
                true
                );
            };
            Telerik.Web.UI.Editor.CommandList["ImageEditor"] = function (commandName, editor, args) {
                var elem = editor.getSelectedElement(); //returns the selected element.

                if (elem.tagName === "IMG") {
                    var src = elem.src;

                    editor.showExternalDialog(
                    "path_removed_for_security_reasons?src=" + src,
                    {},
                    450,
                    425,
                    null,
                    null,
                    "Change Graphic",
                    true,
                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                    false,
                    true);
                }
                else {
                    var myCallbackFunction = function (sender, args) {
                        editor.pasteHtml(String.format("<img  src='{0}' alt='{1}' class='tds_centered_image' />", args.src, args.alt))
                    }

                    editor.showExternalDialog(
                    "path_removed_for_security_reasons",
                    {},
                    1175,
                    575,
                    myCallbackFunction,
                    null,
                    "Choose Graphic",
                    true,
                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Reload,
                    false,
                    true);
                }
            };
        </script>
    </telerik:RadScriptBlock>
</asp:Content>

Thanks!

[Ianko]

Hello Amy,

The described behavior is due to the complex usage of parent controls, child controls and the fluid width.

What happens is that when the editor is being rendered/initialized the Splitter controls has not been set to the size that is defined. This is due to normal and expected HTML behavior - all child controls are rendering first and then their parents. 

Note that both,  the RadEditor and the RadSplitter are calculated dynamically and therefore when the RadEditor is trying to calculate its width, the width of the splitter is not filling the set size, but only e.g. 200px. Because of that the set 200px height are not enough for the RadEditor toolbar to be rendered properly and automatically expands the height of the whole RadEditor to a more suitable value.

In a later moment (when the splitter is loaded) the splitter has correct width, the RadEditor inherits this width due to the set 85%, but the height stays with the firstly calculated height.

When it comes to such complex size and fluid requirements, it is recommended to use further client-side logic to set dimensions, based on already rendered controls and HTML elements.

For example, the following piece of code triggers when the splitter is loaded and set correct size to the RadEditor controls using the client-side setSize method:

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="500px" Width="100%" OnClientLoad="OnClientLoad">
    <telerik:RadPane ID="rpBottomRight" runat="server">
        <telerik:RadEditor ID="re1" runat="server" Width="85%" Height="200px">
        </telerik:RadEditor>
    </telerik:RadPane>
</telerik:RadSplitter>

<telerik:RadScriptBlock ID="rsb2" runat="server">
    <script language="javascript" type="text/javascript">
        function OnClientLoad(sender, args) {
            var editor = $find("<%= re1.ClientID %>"),
                calculatedWidth = editor.get_element().offsetWidth;

            editor.setSize(calculatedWidth, 200);
        }
    </script>
</telerik:RadScriptBlock>

Regards,
Ianko
Telerik

 

 

[Amy]

Thank you for your explanation and the sample code.  I was able to successfully implement the javascript you provided.  

One additional question regarding implementation.  Our radeditors are often contained within a user control that is embedded in the radsplitters on the parent page.  I've added the OnSplitterLoad function to the user controls and the call to that function on the parent page.  This works fine, but I thought I'd check to see if you felt there could be a better way to implement this change.

Thanks again!

[Ianko]

Hello Amy,

The described implementation seem correct. The only reason I can think of that could cause issues is if the IDs of the RadEditor controls used in the user controls are the correct ones. As you know, when controls are used through user controls their IDs may change dynamically. 

Although I assume that if you are unable to find any further issues with the layout of the RadEditor controls, then everything should be fine.

Regards,
Ianko
Telerik