RadEditor's EditorToolGroup design issue in IE browser

[Anwar]

Hi,
I am getting design issue with EditorToolGroup on RadEditor  in IE browse.
As shown in bellow image getting some unnecessary space just bellow the tool group.


In chrome and safari its looks good.


Editor properties given,
<telerik:RadEditor ID="textRadEditor" EditModes="Design" runat="server" Width="100%"
                                                        StripFormattingOptions="AllExceptNewLines" EnableResize="false" 
                                                        ContentFilters="None" OnClientPasteHtml="OnClientPlainTextsubmit" Height="550px">
                                                        <tools>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="convertToTEXT" Text="Convert HTML to TEXT" ShowText="true"
                                                                    ShowIcon="false" />
                                                                <telerik:EditorSeparator />
                                                                <telerik:EditorTool Name="InsertEditorLinks" ShowIcon="false" ShowText="true" Text="Insert Link" />
                                                            </telerik:EditorToolGroup>
                                                        </tools>
                                                        <cssfiles>
                                                            <telerik:EditorCssFile Value="~/Editor/RadEditorTools/EditorContentArea.css" />
                                                        </cssfiles>
                                                    </telerik:RadEditor>  

Any idea to solve this design issue.
Thank you in Advance.

[Anwar]

Images pasted is not displaying in my initial post.Please refer attached images here.
IE.JPG - Taken from IE browser
Chrome.JPG - Taken from chrome browser

[Ianko]

Hello Anwar,

I assume that the Telerik UI for ASP.NET AJAX suite used is not the latest one. I suggest trying to resolve this issue by upgrading to the latest version of suite.

If this is not the case, you can also follow this feedback portal item, logged for a similar scenario to the one encountered.

Regards,
Ianko
Telerik

 

 

[Anwar]

Thanks for the reply Lanko,

The alternate solution given is not working at my end.
I am using IE11 and telerik version 2013 .
Let me know you need any thing more.

Code:
<telerik:RadEditor ID="textRadEditor" EditModes="Design" runat="server" Width="100%"
                                                        StripFormattingOptions="AllExceptNewLines" EnableResize="false" OnClientLoad="OnClientTextEditorLoad"
                                                        ContentFilters="None"  Height="550px">
                                                        <tools>
                                                            <telerik:EditorToolGroup>
                                                                <telerik:EditorTool Name="convertToTEXT" Text="Convert HTML to TEXT" ShowText="true"
                                                                    ShowIcon="false" />
                                                                <telerik:EditorSeparator />
                                                                <telerik:EditorTool Name="InsertEditorLinks" ShowIcon="false" ShowText="true" Text="Insert Link" />
                                                            </telerik:EditorToolGroup>
                                                        </tools>
                                                        <cssfiles>
                                                            <telerik:EditorCssFile Value="~/Editor/RadEditorTools/EditorContentArea.css" />
                                                        </cssfiles>
                                                    </telerik:RadEditor>
Script:

                                                        function OnClientTextEditorLoad(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";
                                                            }

[Ianko]

Hi Anwar,

Note that using an older version of the Telerik UI for ASP.NET AJAX could introduce some incompatibility issues with new browsers, like IE11 which is released on 17 October 2013.

If you are using a release that is older that the release of the browser then you should be aware taht this version has not been designed, tested and therefore supported with this browser.

I suggest upgrading to 2014 Q1 version to isolate the possibility for incompatibility issue related to IE11 browser version, that is already fixed.

Regards,
Ianko
Telerik

 

 

[Anwar]

I have mentioned my IE browser version just to know is there any browser specific code based on version.
Actually the issue exist in all versions of IE.

Thanks,
Anwar

[Ianko]

Hello Anwar,

I suggest trying to isolate the issue in a simple, locally runnable project, so that I could be able to reproduce and investigate it on my end.

Currently I am unable to find out why the described layout issue is resulted with this configuration.

Regards,
Ianko
Telerik