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

Having trouble setting the toolbar at the bottom using DockingZone attribute

5 Answers 141 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Lakshman
Top achievements
Rank 1
Lakshman asked on 18 Feb 2009, 06:14 AM

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

5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 23 Feb 2009, 09:13 AM
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.
0
Lakshman
Top achievements
Rank 1
answered on 23 Feb 2009, 01:47 PM

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

0
Lakshman
Top achievements
Rank 1
answered on 25 Feb 2009, 10:33 PM

Rumen,

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

Thanks, Lakshman

0
Rumen
Telerik team
answered on 26 Feb 2009, 09:01 AM
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.
0
Lakshman
Top achievements
Rank 1
answered on 26 Feb 2009, 03:40 PM

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

Tags
Editor
Asked by
Lakshman
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Lakshman
Top achievements
Rank 1
Share this question
or