Editor Toolbars broken?

5 posts, 1 answers
  1. Bryan
    Bryan avatar
    12 posts
    Member since:
    Sep 2012

    Posted 27 Feb 2014 Link to this post

    Hello there,
    I have just upgraded to Q1 2014 from Q3 2013 SP2. I have noticed the following behaviour in the toolbars in IE11:

    - The images with the Question tab activated (740px width) - there is a large difference in the way in which the bottom tools are rendered
    - The images with the Instructions tab activated (99% width) - the top toolbar behaves so differently to the other.

    Before the upgrade, these editors looked like the compatibility mode off images, but the compatibility mode was on.
    Now, after the upgrade and with compatibility mode on, they look terrible. Turning off compatibility mode ruins the layout of the rest of my application, so the requirement is to have compatibility mode settings to on.

    I have also included a screen capture of my aspx code - I collapsed some areas to fit on to one screen.

    Do you have any thoughts / suggestions?
  2. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 27 Feb 2014 Link to this post

    Hi Bryan,

    I tried to reproduce the problem with the following markup, but to no avail.
    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1">
        <Tabs>
            <telerik:RadTab Text="Tab1" runat="server" Selected="true"></telerik:RadTab>
            <telerik:RadTab Text="Editor1" runat="server"></telerik:RadTab>
            <telerik:RadTab Text="Editor2" runat="server"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
        <telerik:RadPageView runat="server" ID="RadPageView1" Selected="true">
            <h2>text</h2>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageView2">
            <telerik:RadEditor runat="server" ID="RadEditor1" Width="760"></telerik:RadEditor>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageView3">
            <telerik:RadEditor runat="server" ID="RadEditor2" Width="99%"></telerik:RadEditor>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    Please examine it and let me know if I am missing something. It would be helpful if you could provide a simple, runnable project, that demonstrates the problem, so that I could investigate it on my end.

    Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. Bryan
    Bryan avatar
    12 posts
    Member since:
    Sep 2012

    Posted 27 Feb 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Here is a link to a zip file that will replicate the issue (https://dl.dropboxusercontent.com/u/63298198/EditorIssue.zip)
    Please note:
    VS2012
    UI for ASP.NET AJAX version Q1 2014 (updated 27Feb2014)
    .Net Framework 4.0 (not 4.5)
    IE 11 with compatibility mode on

    Ianko said:
    Note that the shown collapse issue in toolbar-width-99percent---compatibility-mode-on.png is an expected behavior because the compatibility mode does not support such collapse functionality of the HTML elements. I recommend using multiple Toolgroups for the tools, so that they could collapse as expected in earlier


    With regards to this, prior to yesterday's controls upgrade, I was not getting this formatting issue using UI for ASP.NET AJAX version Q3 2013 SP1.

    Hope this helps...

  4. Answer
    Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 28 Feb 2014 Link to this post

    Hello Bryan,

    You are correct this issues are confirmed as bugs and I will log them into our feedback portal.

    As a token of gratitude I am updating your Telerik points.

    For the time being I succeeded to workaround the issues with the following markup:
    <table cellpadding="3" width="1000px" border="0">
        <tr align="left">
            <td>
                <asp:Label runat="server" ID="lblName" Text="Name" /></td>
        </tr>
        <tr align="left">
            <td>
                <telerik:RadTextBox runat="server" ID="txtName" MaxLength="100" Width="450px" /></td>
        </tr>
        <tr align="left" valign="top">
            <td>
                <telerik:RadTabStrip runat="server" ID="ts1" SelectedIndex="0" MultiPageID="mp1" Skin="Default" Align="Justify"
                    <Tabs>
                        <telerik:RadTab Text="Details" Value="detail" PageViewID="pvDetails" />
                        <telerik:RadTab Text="Question" Value="qn" PageViewID="pvQn" />
                        <telerik:RadTab Text="Guidance" Value="guidance" PageViewID="pvGuid" />
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="mp1" SelectedIndex="0" CssClass="multiPage">
                    <telerik:RadPageView runat="server" ID="pvDetails">
                        <center>
                                <h2>Not editor</h2>
                            </center>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="pvQn">
                        <center>
                                <br />
                                <table width="95%">
                                    <tr align="left">
                                        <td>
                                            <telerik:RadEditor ID="txtQuestion" runat="server" Height="350px" Width="740px"
                                                ToolsFile="CustomToolsImagesFile.xml" ConvertTagsToLower="True" SpellEditDistan
                                                ToolbarMode="Default" OnClientLoad="OnClientLoad">
                                            </telerik:RadEditor>
                                            <br />
                                        </td>
                                    </tr>
                                </table>
                            </center>
                        <br />
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="pvGuid">
                        <center>
                                <br />
                                <table width="95%">
                                    <tr align="left">
                                        <td>
                                            <telerik:RadEditor ID="txtGuidance" runat="server" Height="400px" Width="99%"
                                                ToolsFile="CustomToolsImagesFile.xml" ConvertTagsToLower="True" SpellEditDistan
                                                ToolbarMode="Default" OnClientLoad="OnClientLoad">
                                            </telerik:RadEditor>
                                        </td>
                                    </tr>
                                </table>
                            </center>
                        <br />
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </td>
        </tr>
    </table>
         
    <%-- The following script fixes the problem with the editor set with toolgroups having dockingzone=bottom attribute --%>
     
    <script type="text/javascript">
        Sys.Application.add_load(function () {
     
     
            var txtQuestion = $find("<%= txtQuestion.ClientID %>");
            var txtGuidance = $find("<%= txtGuidance.ClientID %>");
     
            txtQuestion.get_element().style.height = "99%"
            txtGuidance.get_element().style.height = "99%"
     
            txtQuestion.repaint();
            txtGuidance.repaint();
        });
     
        var oldOnresizeEnd = Telerik.Web.UI.RadEditor.prototype.onResizeEnd;
     
        Telerik.Web.UI.RadEditor.prototype.onResizeEnd = function () {
            oldOnresizeEnd.call(this);
            this.get_element().style.height = "";
        }
    </script>
     
    <%-- The following fixes the problem with the wrong toolgroup collapsing in IE7 (compatibility mode) --%>
     
    <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>
     
    The problem with the toolgroups is that under IE7 (compatibility mode) there is a logic that modifies the width of the HTML elements and restricts the inner tools to stay fixed.

    The problem with the height of the editor stems from an improvement made on the resize calculation. It appears that when a dockingzone="bottom" is used the height is not calculated correctly. A better solution from the one suggested in the example markup is not using this attribute for the time being, although I hope the above fix should be working properly.

    Let me know if you have further concerns.

    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  5. Bryan
    Bryan avatar
    12 posts
    Member since:
    Sep 2012

    Posted 03 Mar 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Thanks, this fix resolved the above issue
Back to Top