This is a migrated thread and some comments may be shown as answers.

Empty space at bottom of editor

4 Answers 208 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Daniel asked on 08 Aug 2013, 04:10 PM

emptyspaceeditor.png

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>

4 Answers, 1 is accepted

answered on 09 Aug 2013, 02:35 PM

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.

answered on 09 Aug 2013, 06:32 PM

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);

}

answered on 13 Aug 2013, 07:21 AM

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