Empty space at bottom of editor

5 posts, 0 answers
  1. Daniel
    Daniel avatar
    23 posts
    Member since:
    Jun 2012

    Posted 08 Aug 2013 Link to this post

    My editor has an empty space at the bottom (see attached screenshot).  As far as I can tell, this only appears when autoheight is true.  I have tried clearing out the modules and changing css, all with no luck.  When I look at the editor's source in firefox using firebug I noticed that there is a newline which is causing the bottom space to exist (it is between the Wrapper table and the InsertLink div):

    <div id="ctl00_cphMain_fv_reSupervisorNotes" class="RadEditor Default reWrapper" style="height: auto; width: 100%; min-height: 100px; min-width: 856px;">
    <div id="ctl00_cphMain_fv_reSupervisorNotes_dialogOpener" style="display:none;">
    <div class="reRibbonBarWrapper"></div>
    <table id="ctl00_cphMain_fv_reSupervisorNotesWrapper" cellspacing="0" cellpadding="0" style="table-layout:auto;width:100%;height:100px;">
    
    <div id="ctl00_cphMain_fv_reSupervisorNotes_InsertLink" class="reInsertLinkWrapper" style="display: none;">
    <table class="reControlsLayout" cellspacing="0" cellpadding="0" border="0">
    </div>
    <input id="ctl00_cphMain_fv_reSupervisorNotes_ClientState" type="hidden" name="ctl00_cphMain_fv_reSupervisorNotes_ClientState" autocomplete="off">
    </div>


    Here is my editor declaration:

    <telerik:RadEditor
        ID="reSupervisorNotes" runat="server"
        EditModes="Design" ContentAreaMode="Div" NewLineMode="P"
        ToolsFile="~/App_Data/RadEditor/Tools.xml" ToolbarMode="ShowOnFocus"
        AutoResizeHeight="true" Height="100px" Width="100%"
        Content="<%# Bind('SupervisorNotes') %>"
        OnClientLoad="RadEditorOnClientLoad">
        <Languages>
            <telerik:SpellCheckerLanguage Code="en-GB" Title="English UK" />
        </Languages>
    </telerik:RadEditor>

    And here is my tools file:

    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <modules>
            <module name="RadEditorHtmlInspector" enabled="false" visible="false" dockingzone="bottom" />
            <module name="RadEditorNodeInspector" enabled="false" visible="false" dockingzone="bottom" />
            <module name="RadEditorDomInspector" enabled="false" visible="false" dockingzone="bottom" />
            <module name="RadEditorStatistics" enabled="false" visible="false" dockingzone="bottom" />
        </modules>
        <tools>
            <tool name="Bold" shortcut="CTRL+B"/>
            <tool name="Italic" shortcut="CTRL+I"/>
            <tool name="Underline" shortcut="CTRL+U"/>
            <tool separator="true"/>
            <tool name="ForeColor"/>
            <tool name="BackColor"/>
            <tool separator="true"/>
            <tool name="JustifyLeft"/>
            <tool name="JustifyCenter"/>
            <tool name="JustifyRight"/>
            <tool separator="true"/>
            <tool name="Indent"/>
            <tool name="Outdent"/>
            <tool separator="true"/>
            <tool name="InsertOrderedList"/>
            <tool name="InsertUnorderedList"/>
            <tool separator="true"/>
            <tool name="InsertLink" shortcut="CTRL+K"/>
            <tool name="InsertSymbol"/>
        </tools>
        <tools name="DropdownToolbar">
            <tool name="FontName"/>
            <tool name="RealFontSize" text="Size"/>
        </tools>
        <tools enabled="true">
            <tool name="Undo" shortcut="CTRL+Z"/>
            <tool name="Redo" shortcut="CTRL+Y"/>
            <tool separator="true"/>
            <tool name="Cut" shortcut="CTRL+X"/>
            <tool name="Copy" shortcut="CTRL+C"/>
            <tool name="Paste" shortcut="CTRL+V"/>
            <tool separator="true"/>
            <tool name="Print" shortcut="CTRL+P"/>
            <tool name="FindAndReplace" shortcut="CTRL+F"/>
            <tool name="SelectAll" shortcut="CTRL+A"/>
            <tool separator="true"/>
            <tool name="AjaxSpellCheck" shortcut="F7"/>
            <tool name="ToggleScreenMode" shortcut="F11"/>
        </tools>
     
    </root>
  2.
  3. Bozhidar
    Admin
    Bozhidar avatar
    693 posts

    Posted 09 Aug 2013 Link to this post

    Hello,

    A little piece of javascript code will remove the white space:

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadEditor ID="reSupervisorNotes" runat="server" EditModes="Design" ContentAreaMode="Div"
            NewLineMode="P" ToolsFile="Tools.xml" ToolbarMode="ShowOnFocus"
            AutoResizeHeight="true" Height="100px" Width="100%"
            _OnClientLoad="RadEditorOnClientLoad">
            <Languages>
                <telerik:SpellCheckerLanguage Code="en-GB" Title="English UK" />
            </Languages>
        </telerik:RadEditor>
     
     
        <script type="text/javascript">
        (function() {
     
            var editroWrap = document.getElementById( "<%= reSupervisorNotes.ClientID %>" ),
                children = [].slice.call(editroWrap.childNodes);
     
            for (var i = 0, l = children.length; i < l; i++ ) {
                var child = children[i];
     
                if (child.nodeType == Node.TEXT_NODE) {
                    editroWrap.removeChild( child );
                }
            }
     
        })();
        </script>
    </form>
    </body>


    Regards,
    Bozhidar
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Daniel
    Daniel avatar
    23 posts
    Member since:
    Jun 2012

    Posted 09 Aug 2013 Link to this post

    That works, thanks!

    I adapted your solution to work on every editor on my site via the OnClientLoad method:

    function RadEditorOnClientLoad(sender, args)
    { 
        var editroWrap = document.getElementById(sender.get_id()),
        children = [].slice.call(editroWrap.childNodes);
     
        for (var i = 0, l = children.length; i < l; i++)
        {
            var child = children[i];
            if (child.nodeType == Node.TEXT_NODE)
            {
                editroWrap.removeChild(child);
            }
        }
    }
  7. Daniel
    Daniel avatar
    23 posts
    Member since:
    Jun 2012

    Posted 09 Aug 2013 Link to this post

    After some testing, I realized that this solution doesn't work in IE8 (the slice() method causes a javascript error).  IE9, IE10, Firefox, and Chrome are all fine.  Any suggestions?
  8.
  9. Ianko
    Admin
    Ianko avatar
    1956 posts

    Posted 13 Aug 2013 Link to this post

    Hello Daniel,

    You could replace the provided function with this one:
    function RadEditorOnClientLoad(sender, args){
        var editroWrap = document.getElementById(sender.get_id()),
            reBlank = /^\s*$/,
            child = editroWrap.firstChild;
     
        while (child) {
            var currentNode = child;
            child = currentNode.nextSibling;
            if (currentNode.nodeName == "#text" && reBlank.test(currentNode.nodeValue)) {
                editroWrap.removeChild(currentNode);
            }
        }
    }

    The reason why the whole function should be replaced is that not only the slice method does not work in IE8 and IE7, but there is no Node object.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top