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):
Here is my editor declaration:
And here is my tools file:
<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
0
Hello,
A little piece of javascript code will remove the white space:
Regards,
Bozhidar
Telerik
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.
0
Daniel
Top achievements
Rank 1
Rank 1
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:
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); } }}0
Daniel
Top achievements
Rank 1
Rank 1
answered on 09 Aug 2013, 08:31 PM
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?
0
Hello Daniel,
You could replace the provided function with this one:
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
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.