Radeditor toolbar container breaking onto two lines

7 posts, 0 answers
  1. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 26 Jul 2011 Link to this post

    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.
  2.
  3. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 27 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 27 Jul 2011 Link to this post

    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.
  7. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 01 Aug 2011 Link to this post

    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?
  8.
  9. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 01 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. Joseph Bonanno
    Joseph Bonanno avatar
    19 posts
    Member since:
    Sep 2009

    Posted 01 Aug 2011 Link to this post

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

  13. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 04 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  14.
Back to Top