Radeditor toolbar container breaking onto two lines

[Joseph Bonanno]

I'm having a very odd problem with the RadEditor Toolbar and the ForeColor tool. First some background: We are using a DockingZone to place the tool bar in a separate pane from the content window.

The last item in the toolbar (.reGrip .grip_last) is being forced onto a new line. The interesting part about this is if I remove the ForeColor tool from the toolsfile, the issue corrects itself. I've tried removing every other tool, as well as adding tools and the problem only exists when the ForeColor tool is present:

Here's some code although, I'm not sure how much it'll help:
Toolsfile:

<root>
    <tools name="MainToolbar" dockingzone="editorToolbar" isribbon="false" dockable="true">
    <tool name="Bold"/>
        <tool name="Italic"/>
        <tool name="Underline"/>
        <tool name="StrikeThrough"/>
        <tool name="FontName"/>
        <tool name="ForeColor"/>
        <tool separator="true"/>
        <tool name="JustifyLeft"/>
        <tool name="JustifyCenter"/>
        <tool name="JustifyRight"/>
        <tool name="JustifyFull"/>
        <tool name="JustifyNone"/>
        <tool separator="true"/>
        <tool name="Superscript"/>
        <tool name="Subscript"/>
        <tool separator="true"/>
        <tool name="ConvertToLower" />
        <tool name="ConvertToUpper" />
        <tool name="Indent" />
        <tool name="Outdent" />
        <tool name="InsertOrderedList" />
        <tool name="InsertUnorderedList" />
  </tools>


</root>

HTML:

<PageSubTitleTemplate>
     <div id="editorToolbarWrapper" runat="server" class="editorToolbarWrapper">
                    <div id="editorToolbar"></div>
                </div>


    </PageSubTitleTemplate>
    <PageContentTemplate>
        <telerik:RadEditor ID="m_UIEmailEditor" runat="server" SkinID="EmailEditor" OnClientLoad="OnClientLoad"  >

        </telerik:RadEditor>        <telerik:RadEditor ID="m_UIEmailEditor" runat="server" SkinID="EmailEditor" OnClientLoad="OnClientLoad"  >

        </telerik:RadEditor>
</PageContentTemplate>

Attached aer 4 images, the first with ForeColoe enabled, 2nd with it disabled, 3rd with only forecolor, and 4th without forecolor, but with additional tools.

[Dobromir]

Hi Joseph,

I tried to reproduce the problem but to no avail. In the attached screenshots I noticed that the position of the toolbar is modified  - the toolbar is placed in an outer div. Could you please provide the code that is used to apply this customization?

Also, according to the screenshots I believe that the floating of the toolbar elements is broken by some CSS rule. Could you try to remove all custom CSS registered on the page where RadEditor resides and see if the problem still exists?

Kind regards,
Dobromir
the Telerik team

[Joseph Bonanno]

Dobromir -

Thanks for getting back to me. The toolbar is set to an outer html tag following the instructions here:
http://www.telerik.com/help/aspnet-ajax/editor-dockable-toolbars.html

The code is all listed in my previous post, we create an HTML div with an id equal to editorToolbar, then declare it as a docking zone in the xml file:

<tools name="MainToolbar" dockingzone="editorToolbar" isribbon="false" dockable="true">

I've set the skin to "default" to use only the embedded skin and removed all custom CSS leaving just the Rad Control related skins and I still see the issue, again, the issue only presents itself when using forecolor, it sits fine when forcolor is removed and other options are added.

[Joseph Bonanno]

As a supplement, I've been attempting to troubleshoot this further and I found its an issue with any control that creates a menu. I've tried modifying css to resolve, but I havent had any luck yet.

Is there any additioanl help you can give?

[Dobromir]

Hi Joseph,

I am not quite sure what may be causing this issue. I tried to reproduce it locally but again to no avail Could you please provide more detailed information on the specific scenario?

• Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?
• Under which browser and its version the problem occurs?
• Do experience the same behavior with another tool which is using a splitbutton, for example BackColor, FormatStripper.
• Could you please provide a simple fully runnable project and / or a live URL reproducing the problem so we can investigate it further?

Best wishes,
Dobromir
the Telerik team

[Joseph Bonanno]

Hi Dobromir -

I'll work on getting a fully runnable solution over to you, but here are the answers to the rest of your questions:

• Which version of RadControls for ASP.NET AJAX and .NET Framework are used in the application?

        2009.3.1503.35

• Under which browser and its version the problem occurs?

        Internet Explorer 8

• Do experience the same behavior with another tool which is using a splitbutton, for example BackColor, FormatStripper.

         Yes. I'm seeing this on any tool that has a menu attached to it (Find, Replace, Undo, Redo, ForeColor, BaclColor, etc. )

[Dobromir]

Hi Joseph,

The version you are using is quite old, could you please try to upgrade to the latest version of RadControls for ASP.NET AJAX (currently Q2 2011 - 2011.2.712) and see if the problem still occurs?

Once again, I tried to reproduce the problem using the same version of RadControls and Internet Explorer 8 but still the toolbar was rendered correctly. I live URL demonstrating the problem will be of great help solving this case.

All the best,
Dobromir
the Telerik team