ContentAreaMode='Div' and large content flickers in IE

9 posts, 1 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 06 Mar 2014 Link to this post

    Hi,

    The radeditor flickers a lot when using IE, when setting ContentMode to Div and using AutoResize to fit content height.

    See the following sample:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
     
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml" style="overflow: auto">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <telerik:RadEditor ID="re2" runat="server" AutoResizeHeight="True" ContentAreaMode="Div">
                    <Content>
                        Some text<br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Delete this row!
                        <br />
                        <br />
                        <br />
                        Some more text
                    </Content>
                 </telerik:RadEditor>
            </div>
        </form>
    </body>
    </html>

    Scroll down to the bottom and delete the line "Delete this row!", the entire page scrolls to the top of the Editor...

    I have located the root of this behavior, it has to do with setFocus. Doing the following hack (commenting out the setFocus line):
    <script type="text/javascript">
                Telerik.Web.UI.RadEditor.prototype.executeCommand = function (radCommand, setFocus, addToStack)
                {
                    //Set the editor's window
                    if (!radCommand.get_window())
                    {
                        radCommand.set_window(this.get_contentWindow());
                    }
     
                    //if (false != setFocus && !this.isOpera) this.setFocus(); //Opera has a problem! Typing is discontinued.
                    this._commandsManager.execute(radCommand, addToStack);
                }
            </script>

    The Editor works really smooth after this hack, but of course this might have bad side effects...
    This fix also makes typing at the bottom of the Editor really smooth an nice!!!

    Is this something you can fix with a real solution?

    Regards
    Andreas
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Mar 2014 Link to this post

    Hi Andreas,

    The described problem is logged for fixing. Unfortunately, due to the complexity of this task I am unable to estimate when is going to be fixed neither provide a possible approach as a workaround. The only possible known resolutions is to change the ContentAreaMode to iframe.

    You can follow this feedback portal item for updates on this task.

    Regards,
    Ianko
    Telerik

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

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

    Hi,

    Well IFrame mode is not an option for us...
    We will have to solve this in Div-mode, our end users thinks the editor is pretty much unusable when editing large content because of the flickering!

    We have actually tried this for now:
    if ($telerik.isIE)
            {
                Telerik.Web.UI.RadEditor.prototype.setFocus = function ()
                {
                }
            }

    Haven't found any side effects of this yet, but it doesn't feel like a good solution...
    Maybe this will work for us since we only use a small part of the editor tools...
    Hoping for a real solution from your side!!!

    Regards
    Andreas
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 14 Mar 2014 Link to this post

    Hi Andreas,

    Thank you for getting back to me.

    The used workaround seem to be working find and I am unable to think of possible cases which could lead to unwanted side effects.

    The only one that I can think of is if the ContentAreaMode is set to Iframe, although as you mentioned this mode is never going to be used. Nevertheless, I recommend you using the following workaround, which will prevent the correct behavior of the Iframe mode and use the workaround for the DIV: 
    <telerik:RadEditor ID="RadEditor1" runat="server" AutoResizeHeight="True" ContentAreaMode="Div">
    </telerik:RadEditor>
     
    <script type="text/javascript">
        Telerik.Web.UI.RadEditor.prototype.setFocus = function () {
            try {
                if ($telerik.isIE && this.getSelection().isControl()) return;
     
                var area = this.get_mode() != $T.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
                if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) area = this.get_contentArea();
                if (area && area.focus && !this.get_autoResizeHeight()) area.focus();
            }
            catch (e) { }
        };
     
    </script>

    I also used the provided workaround to update the feedback portal item, so that other users could resolve the same problem. As token of appreciation for sharing knowledge with the community.

    On a side note, we would like to hear your feedback about this important change that we plan to apply to the default Enter key behavior (NewLineMode) of RadEditor. As a token of gratitude for your contribution we will reward you with 1000 Telerik points for your vote.


    Regards,
    Ianko
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  6. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

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

    Thanks!

    Changed to your workaround instead. Working just fine!
    Also voted for changing to P-tag.
    By the way we changed to P-tag in our solution!

    Regards
    Andreas
  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 14 Mar 2014 Link to this post

    Hi Andreas,

    Thank you for your sharing your feedback with us.

    I have already updated your Telerik points as promised.

    Regards,
    Ianko
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  8. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 17 Mar 2014 Link to this post

    Hi,

    Found two small issues with our workaround:
    First, there is a javascript error in it since $T is undefined.
    Even after fixing this, it will be bad for other browsers (Firefox for example) since with this fix you can't for example press the bold button and then start typing immediately since the editor doesn't have focus..

    The following fix seems to work better:
    Telerik.Web.UI.RadEditor.prototype.setFocus = function ()
            {
                try
                {
                    if ($telerik.isIE && this.getSelection().isControl()) return;
     
                    var area = this.get_mode() != Telerik.Web.UI.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
                    if (this.get_contentAreaMode() == Telerik.Web.UI.EditorContentAreaMode.Div) area = this.get_contentArea();
                    if (area && area.focus && !($telerik.isIE && this.get_autoResizeHeight())) area.focus();
                }
                catch (e) { }
            };

    Regards
    Andreas
  9. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 17 Mar 2014 Link to this post

    Hi Andreas,

    You are correct, this workaround leads to some inconsistent issues.

    Could you please try with these modifications:
    Telerik.Web.UI.RadEditor.prototype.setFocus = function () {
        var $T = Telerik.Web.UI;
        try {
            if ($telerik.isIE && this.getSelection().isControl()) return;
     
            var area = this.get_mode() != $T.EditModes.Html ? this.get_contentWindow() : this._getTextArea();
            if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) area = this.get_contentArea();
            if (area && area.focus && !(this.get_autoResizeHeight() && $telerik.isIE))area.focus();
        }
        catch (e) { }
    };


    Regards,
    Ianko
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  10. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

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

    Hi,

    That code does same as I suggested, so it is working just fine!

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