RadEditor's EditorToolGroup design issue in IE browser

7 posts, 0 answers
  1. Anwar
    Anwar avatar
    31 posts
    Member since:
    Aug 2011

    Posted 05 Aug 2014 Link to this post

    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.







  2. Anwar
    Anwar avatar
    31 posts
    Member since:
    Aug 2011

    Posted 05 Aug 2014 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 05 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Anwar
    Anwar avatar
    31 posts
    Member since:
    Aug 2011

    Posted 05 Aug 2014 in reply to Ianko Link to this post

    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";
                                                                }

  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 06 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Anwar
    Anwar avatar
    31 posts
    Member since:
    Aug 2011

    Posted 08 Aug 2014 in reply to Ianko Link to this post

    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
  8. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017