Toolbar not wrapping after upgrade

3 posts, 0 answers
  1. Philip
    Philip avatar
    5 posts
    Member since:
    Apr 2011

    Posted 20 Mar 2014 Link to this post

    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>
  2. Philip
    Philip avatar
    5 posts
    Member since:
    Apr 2011

    Posted 20 Mar 2014 Link to this post

    I've attached a picture of what it looks like.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top