Editor Toolbars broken?

[Bryan]

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?

[Ianko]

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

[Bryan]

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

​[quote]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[/quote]

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

[Ianko]

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

[Bryan]

Hi Ianko,

Thanks, this fix resolved the above issue