Toolbar not wrapping after upgrade

[Philip]

Hi all, I just updated one of our applications to the latest version of Telerik ASP.NET AJAX (v2014.1.225.35). After doing this, the RadEditor toolbar in the application is no longer wrapping. We set the toolbar using the ToolsFile.xml (see below). Is there something else I need to do to get the toolbar to wrap?

<root>
<tools>
<tool name="FindAndReplace"/>
<tool name="Print"/>
<tool separator="true"/>
<tool name="Cut"/>
<tool name="Copy"/>
<tool name="Paste"/>
<tool name="PasteFromWord"/>
<tool name="PastePlainText"/>
<tool separator="true"/>
<tool name="Undo"/>
<tool name="Redo"/>
<tool separator="true"/>
<tool name="InsertTable"/>
<tool separator="true"/>
<tool name="InsertLink"/>
<tool name="Unlink"/>
<tool name="InsertSymbol"/>
<tool separator="true"/>
<tool name="Bold"/>
<tool name="Italic"/>
<tool name="Underline"/>
<tool name="ForeColor"/>
<tool name="BackColor"/>
<tool name="FormatBlock"/>
<tool name="FontName" />
</tools>
<tools name="MainToolbar" enabled="true">
<tool name="RealFontSize" />
</tools>
<tools>
<tool separator="true"/>
<tool name="JustifyLeft"/>
<tool name="JustifyCenter"/>
<tool name="JustifyRight"/>
<tool name="JustifyFull"/>
<tool separator="true"/>
<tool name="InsertOrderedList"/>
<tool name="InsertUnorderedList"/>
<tool name="Outdent"/>
<tool name="Indent"/>
<tool separator="true"/>
<tool name="StrikeThrough"/>
<tool name="Subscript"/>
<tool name="Superscript"/>
<tool separator="true"/>
<tool name="AjaxSpellCheck"/>
</tools>
<fontNames>
<item name="Arial" />
<item name="Calibri" />
</fontNames>
<realFontSizes>
<item value="12pt"></item>
<item value="14pt"></item>
<item value="16pt"></item>
<item value="18pt"></item>
<item value="20pt"></item>
<item value="22pt"></item>
</realFontSizes>
</root>

[Philip]

I've attached a picture of what it looks like.

[Ianko]

Hello  Philip,

Thank you for bringing this issue to our attention.

I have already answered you in the sent support ticket.

For anyone other interested on this matter:

The described issue is a result of a IE CSS limitation due to which the toolgroups' width is not calculated properly. The following workaround should resolve it:

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">

</telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args) {
        if (editor.isVisible()) {
            fixToolbarsInIE(editor);
        } else {
            editor.add_firstShow(function () {
                setTimeout(function () {
                    fixToolbarsInIE(editor);
                }, 0);
            })
        }
    }

    function fixToolbarsInIE(editor) {
        if ($telerik.isIE) {
            var $ = $telerik.$;
            var editorID = editor.get_id();
            var topTD = document.getElementById(editorID + "Top");
            var toolGroupElements = $(topTD).find(".reToolbar");

            for (var i = 0, l = toolGroupElements.length; i < l; i++) {

                calculateTools(toolGroupElements[i]);
            }
        }
    }

    function calculateTools(toolGroup) {
        var tools = toolGroup.children;
        var size = 0;

        for (var i = 0, l = tools.length; i < l; i++) {
            var tool = tools[i];
            size += tool.offsetWidth;
        }
        toolGroup.style.width = size + "px";
    }
</script>

Regards,
Ianko
Telerik