Having trouble setting the toolbar at the bottom using DockingZone attribute

[Lakshman]

We have only Save and Cancel buttons in our toolbar and it works properly when its position is set at the top. But we would like to move these buttons to the bottom of the editor.

When I set DockingZone="Bottom" in the Tools File with the following editor configuration, deleting some text from the editor reduces the Iframe height to a larget extent (more than what it shoud). Because of this scrollbars get added. When delete button is pressed few more times, editor size shrinks to a non-usable size and eventually errors out when an attempt is made to set a negative height to the iframe element.

<telerik:radeditor
    ID="RadEditor1"
    runat="server"     
    EditModes="Design,Html"
    AutoResizeHeight="true"
    EnableViewState="true"        
    BorderWidth="0"
    Skin="Telerik"
    ToolsFile="../RadControls/Editor/ToolsFile.xml"
    style="padding:1px;"
    EnableResize="false">       
    <ContextMenus>
        <telerik:EditorContextMenu  Enabled="false" />
        <telerik:EditorContextMenu TagName="IMG"  Enabled="false" />
        <telerik:EditorContextMenu TagName="TABLE"  Enabled="false" />
    </ContextMenus>   
</telerik:radeditor>

ToolsFile.XML

<root>
 <tools name="MainToolbar" DockingZone="Bottom">
 <tool name="Save" />
 <tool name="Cancel" />
 </tools>
</root>

Like I mentioned before, when DockingZone is set to "top" everything works properly.

Please help!

Thanks, Lakshman

[Rumen]

Hi Lakshman,

The observed behavior is a side effect of the AutoResizeHeight= "true" functionality of RadEditor and to fix it you should add at least one toolbar with DockingZone = "Top" on the editor, e.g.

<root>
  <tools name="MainToolbar1"></tools>
  <tools name="MainToolbar" DockingZone="Bottom">
    <tool name="Save" />
    <tool name="Cancel" />
  </tools>
</root>

You can populate the top positioned toolbar with some minimal set of tools for example: Bold, Italic, Underline, e.g.

<root>
  <tools name="MainToolbar1" DockingZone = "Top" >
    <tool name="Bold" />
    <tool name="Italic" />
    <tool name="Underline" />
  </tools>
  <tools name="MainToolbar" DockingZone="Bottom">
    <tool name="Save" />
    <tool name="Cancel" />
  </tools>
</root>

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Lakshman]

Thanks Rumen for getting back to me.

Is there any workaround to use just one toolbar with just Save and Cancel buttons at the bottom of the editor ?

The reason because we use radeditor at many places of the same page and therefore we have a common toolbar on the top which uses lot of radeditor's features including bold, italic, underline etc.

Please let me know and have a good day!

Thanks, Lakshman

[Lakshman]

Rumen,

We are still eager to hear from you and hope there is a workaround :)

Thanks, Lakshman

[Rumen]

Hi Lakshman,

This is a limitation of the AutoResizeHeight algorithm that works properly only when there is a Top toolbar, because it uses its height for calculations.

Nevertheless, you can fix the problem by adding a top positioned toolbar and hide it using the .rade_toolbarWrapper class and the visibility:hidden attribute. The toolbar should have at least 1px height:

<style type="text/css">
.rade_toolbarWrapper
{
    visibility:hidden !important;   
    height:1px;
}
</style>
 
<telerik:radeditor
    ID="RadEditor1"
    runat="server"    
    EditModes="Design,Html"
    AutoResizeHeight="true"
    EnableViewState="true"       
    BorderWidth="0"
    Skin="Telerik"
    ToolsFile="~/ToolsFile.xml"
    style="padding:1px;"
    EnableResize="false">      
    <ContextMenus>
        <telerik:EditorContextMenu  Enabled="false" />
        <telerik:EditorContextMenu TagName="IMG"  Enabled="false" />
        <telerik:EditorContextMenu TagName="TABLE"  Enabled="false" />
    </ContextMenus>  
</telerik:radeditor>

ToolsFile.xml:

<root>
  <tools name="MainToolbar">
    <tool name="Save" />
    <tool name="Cancel" />
  </tools>
  <tools name="MainToolbar" DockingZone="Bottom">
    <tool name="Save" />
    <tool name="Cancel" />
  </tools>
</root>

For your convenience I have attached my test files.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Lakshman]

Thanks Rumen and you are simply awesome!!!

It worked on IE and I had to add this style for FF to set the wrapper height to 1px.

.rade_toolZone .rade_toolbarWrapper
{
 float: right;
}

Thanks, Lakshman