CKEditor autogrow plugin vertical scrollbar flickering issue

Question

I'm having an issue with the CKEditor autogrow plugin:

Upon pressing return (after auto-growing past the min height), the text content shakes (jumps up one line and back down), and a vertical scroll bar flickers on-and-off. The autogrow works, but the user-experience is jerky.

I can hide the vertical scroll bar by specifying scrolling="no" and overflow="hidden", but the text content still shakes.

I'm disabling scrolling in ckeditor.js:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe>

CKEditor initialization code:

       CKEDITOR.replace('Description',
        {
            sharedSpaces:
            {
                top: 'topSpace',
                bottom: 'bottomSpace'

            },
            extraPlugins: 'autogrow,tableresize',
            removePlugins: 'maximize,resize,elementspath',
            skin: 'kama',
            toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'],
             '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']],
            toolbarCanCollapse: false,
            pasteFromWordRemoveFontStyles: false,
            enterMode: CKEDITOR.ENTER_BR,
            shiftEnterMode: CKEDITOR.ENTER_P,
            autoGrow_minHeight: 300

        })

Is there any way to avoid the text content jumping/shifting upon pressing the enter key (after autogrowing past the min height)?

Answer 1

I've been testing a fix today and I think I have a working solution for all major browsers. In addition, I also made a fix for horizontal scrollbar sizing issue (horizontal scrollbar doesn't increase the size of the editor). That ended up being bit of a kludge though (for sake of simplicity scrollbar height is hardcoded 17 pixels) so I'll provide you with both versions, with and without the horizontal scrollbar fix.

I know the proper way would be to create a patch and suggest it to be implemented in next release of CKEditor, but that takes a while so meanwhile here's what you can do. You can download the modified compressed plugin.js file from the link below and place it in your CKEditor in path /plugins/autogrow/plugin.js

• Without horizontal scrollbar fix: http://www.filedropper.com/plugin_3
• With horizontal scrollbar fix: http://www.filedropper.com/plugin_1

So what was changed?

I'll explain these modifications via uncompressed (_source folder) files which are readable whereas compressed files are quite hard to read and understand.

I made small modifications to autogrow temporary marker which is used to calculate editor's new height. Here's the new version of marker code in _source (uncompressed) autogrow/plugin.js line 19.

var marker = CKEDITOR.dom.element.createFromHtml( '<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc );

So height is changed from 1 pixel to zero pixels, a non-breaking space is always printed inside the marker element and font size is forced to zero. After these modifications this actually fixed the issue - instead removing the marker from DOM immediately I changed it to be removed via 1 millisecond timeout (line 24 in uncompressed plugin.js file).

setTimeout(function() {
    marker.remove();
},1);

Horizontal scrollbar fix

This is bit of dull. I just added a check whether editor scrollWidth is bigger than clientWidth and if so then add 17 pixels to newHeight and currentHeight variables before checking newHeight minimum and maximum allowed values.

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels
if ( scrollable.$.scrollWidth > scrollable.$.clientWidth ) {
    newHeight += 17;
    currentHeight += 17;
}

newHeight = Math.max( newHeight, min );
newHeight = Math.min( newHeight, max );

Instead of using 17 pixel hardcoded value, method descibed in How can I get the browser's scrollbar sizes? (or something similar) could be used to calculate scrollbar size to make this fix more proper.

Answer 2

1. contents.css add:

   body {overflow:hidden; /Hide Autogrow flicker/}

   (Need to clear cache to test)

2. plugin.js (resizeEditor) Set "Additional space specified by user" = 20:

newHeight += 20; //Fix Autogrow flicker //(editor.config.autoGrow_bottomSpace || 0);

1. plugin.js (resizeEditor) replace :

if (scrollable.$.scrollHeight > scrollable.clientHeight...

With:

    //Fix Autogrow flicker:
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/}
    var editorBody = $(editor.editable().$);
    if (newHeight >= max)
        editorBody.css('overflow-y', 'visible');
    else
        editorBody.css('overflow-y', 'hidden');