Can anyone offer some insight on why the scroll bar in the either the short and long product description fields would DISAPPEAR?!

When the page first loads, we can see it, but then after the text is formatted it goes away ... even on the full screen view ... the only way to navigate to content below the bottom of the visible text area is to use the cursor keys.

Another VERY strange thing I noticed is that after clicking into either description field, simply depressing the Ctrl key causes the field height to grow!??

Any ideas? We're using cart version PHP 6.8.5 with CK editor on if any of that could be at play here.

Thanks!

Tim Gorski

Can you provide a URL?

Marshall
CENLYT Productions - ms designs
Affordable Web Design
Custom Ecommerce Designs
Responsive Websites
Cenlyt.com

Hi Tim

You're referring to the product admin page here, correct? What browser are you using and I'll take a look for you?

Andy

Please feel free to review / rate our software

I figured out a fix.. In the ckeditor css file, I added this...

.cke_show_borders {
overflow: scroll;
}

Everything works like a charm now.

Tim Gorski

Still running into a snag here...
Although the scrollbars appear now with that css code, if I scroll down to content in the box to edit it, as soon as i click into the window, it jumps back up to the top. The only way i can do anything it to press and hold the cntrl key until the window reaches full height. Once it is full height everything works fine.

My question now is, through css, can the description boxes automatically (by default) show the entire height of the content inside of it? This also is the same on the expanded view as well.

I have confirmed that this is an issue on ALL browsers running 6.8.5 (confirmed with several sites)

Tim Gorski

I don't use the ckeditor much but just had a look for you. As far as I can see the descriptions fields expand depending on the content so that's why there's no scroll bars. I assume that's not happening on your site - does the field expand vertically when you add more paragraphs for example?

Andy

Please feel free to review / rate our software

NEW UPDATE

I deleted my css entry that I used before and added the contents of a ckeditor plugin called autogrow to the top of the config.js file (yes, I did not actually install it as a plugin because it says it only works on default configurations of ckeditor).

The result is that it restored full functionality of having scrollbars and you can now scroll down and click into the editor without it jumping back to the top.

Here is the code that i placed at the top of config.js... if anybody knows how to strip it down to make it more lean for use in ECT, please let me know.

/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/**
* @fileOverview The Auto Grow plugin.
*/

'use strict';

( function() {
CKEDITOR.plugins.add( 'autogrow', {
init: function( editor ) {
// This feature is available only for themed ui instance.
if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
return;

editor.on( 'instanceReady', function() {
// Simply set auto height with div wysiwyg.
if ( editor.editable().isInline() )
editor.ui.space( 'contents' ).setStyle( 'height', 'auto' );
// For classic (`iframe`-based) wysiwyg we need to resize the editor.
else
initIframeAutogrow( editor );
} );
}
} );

function initIframeAutogrow( editor ) {
var lastHeight,
doc,
markerContainer,
scrollable,
marker,
configBottomSpace = editor.config.autoGrow_bottomSpace || 0,
configMinHeight = editor.config.autoGrow_minHeight !== undefined ? editor.config.autoGrow_minHeight : 200,
configMaxHeight = editor.config.autoGrow_maxHeight || Infinity,
maxHeightIsUnlimited = !editor.config.autoGrow_maxHeight;

editor.addCommand( 'autogrow', {
exec: resizeEditor,
modes: { wysiwyg: 1 },
readOnly: 1,
canUndo: false,
editorFocus: false
} );

var eventsList = { contentDom: 1, key: 1, selectionChange: 1, insertElement: 1, mode: 1 };
for ( var eventName in eventsList ) {
editor.on( eventName, function( evt ) {
// Some time is required for insertHtml, and it gives other events better performance as well.
if ( evt.editor.mode == 'wysiwyg' ) {
setTimeout( function() {
if ( isNotResizable() ) {
lastHeight = null;
return;
}

resizeEditor();

// Second pass to make correction upon the first resize, e.g. scrollbar.
// If height is unlimited vertical scrollbar was removed in the first
// resizeEditor() call, so we don't need the second pass.
if ( !maxHeightIsUnlimited )
resizeEditor();
}, 100 );
}
} );
}

// Coordinate with the "maximize" plugin. (https://dev.ckeditor.com/ticket/9311)
editor.on( 'afterCommandExec', function( evt ) {
if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
if ( evt.data.command.state == CKEDITOR.TRISTATE_ON )
scrollable.removeStyle( 'overflow-y' );
else
resizeEditor();
}
} );

editor.on( 'contentDom', refreshCache );

refreshCache();

if ( editor.config.autoGrow_onStartup && editor.editable().isVisible() ) {
editor.execCommand( 'autogrow' );
}

function refreshCache() {
doc = editor.document;
markerContainer = doc[ CKEDITOR.env.ie ? 'getBody' : 'getDocumentElement' ]();

// Quirks mode overflows body, standards overflows document element.
scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();

// Reset scrollable body height and min-height css values.
// While set by outside code it may break resizing. (https://dev.ckeditor.com/ticket/14620)
var body = CKEDITOR.env.quirks ? scrollable : scrollable.findOne( 'body' );
if ( body ) {
body.setStyle( 'height', 'auto' );
body.setStyle( 'min-height', CKEDITOR.env.safari ? '0%' : 'auto' ); // Safari does not support 'min-height: auto'.
}

marker = CKEDITOR.dom.element.createFromHtml(
'<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:1px;display:block;">' +
( CKEDITOR.env.webkit ? ' ' : '' ) +
'</span>',
doc );
}

function isNotResizable() {
var maximizeCommand = editor.getCommand( 'maximize' );

return (
!editor.window ||
// Disable autogrow when the editor is maximized. (https://dev.ckeditor.com/ticket/6339)
maximizeCommand && maximizeCommand.state == CKEDITOR.TRISTATE_ON
);
}

// Actual content height, figured out by appending check the last element's document position.
function contentHeight() {
// Append a temporary marker element.
markerContainer.append( marker );
var height = marker.getDocumentPosition( doc ).y + marker.$.offsetHeight;
marker.remove();

return height;
}

function resizeEditor() {
// Hide scroll because we won't need it at all.
// Thanks to that we'll need only one resizeEditor() call per change.
if ( maxHeightIsUnlimited )
scrollable.setStyle( 'overflow-y', 'hidden' );

var currentHeight = editor.window.getViewPaneSize().height,
newHeight = contentHeight();

// Additional space specified by user.
newHeight += configBottomSpace;
newHeight = Math.max( newHeight, configMinHeight );
newHeight = Math.min( newHeight, configMaxHeight );

// https://dev.ckeditor.com/ticket/10196 Do not resize editor if new height is equal
// to the one set by previous resizeEditor() call.
if ( newHeight != currentHeight && lastHeight != newHeight ) {
newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight;
editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
lastHeight = newHeight;
}

if ( !maxHeightIsUnlimited ) {
if ( newHeight < configMaxHeight && scrollable.$.scrollHeight > scrollable.$.clientHeight )
scrollable.setStyle( 'overflow-y', 'hidden' );
else
scrollable.removeStyle( 'overflow-y' );
}
}
}
} )();

/**
* The minimum height that the editor can assume when adjusting to content by using the Auto Grow
* feature. This option accepts a value in pixels, without the unit (for example: `300`).
*
* Read more in the [documentation](#!/guide/dev_autogrow)
* and see the [SDK sample](https://sdk.ckeditor.com/samples/autogrow.html).
*
* config.autoGrow_minHeight = 300;
*
* @since 3.4
* @cfg {Number} [autoGrow_minHeight=200]
* @member CKEDITOR.config
*/

/**
* The maximum height that the editor can assume when adjusting to content by using the Auto Grow
* feature. This option accepts a value in pixels, without the unit (for example: `600`).
* Zero (`0`) means that the maximum height is not limited and the editor will expand infinitely.
*
* Read more in the [documentation](#!/guide/dev_autogrow)
* and see the [SDK sample](https://sdk.ckeditor.com/samples/autogrow.html).
*
* config.autoGrow_maxHeight = 400;
*
* @since 3.4
* @cfg {Number} [autoGrow_maxHeight=0]
* @member CKEDITOR.config
*/

/**
* Whether automatic editor height adjustment brought by the Auto Grow feature should happen on
* editor creation.
*
* Read more in the [documentation](#!/guide/dev_autogrow)
* and see the [SDK sample](https://sdk.ckeditor.com/samples/autogrow.html).
*
* config.autoGrow_onStartup = true;
*
* @since 3.6.2
* @cfg {Boolean} [autoGrow_onStartup=false]
* @member CKEDITOR.config
*/

/**
* Extra vertical space to be added between the content and the editor bottom bar when adjusting
* editor height to content by using the Auto Grow feature. This option accepts a value in pixels,
* without the unit (for example: `50`).
*
* Read more in the [documentation](#!/guide/dev_autogrow)
* and see the [SDK sample](https://sdk.ckeditor.com/samples/autogrow.html).
*
* config.autoGrow_bottomSpace = 50;
*
* @since 3.6.2
* @cfg {Number} [autoGrow_bottomSpace=0]
* @member CKEDITOR.config
*/

/**
* Fired when the Auto Grow plugin is about to change the size of the editor.
*
* @event autogrow
* @member CKEDITOR.editor
* @param {CKEDITOR.editor} editor This editor instance.
* @param data
* @param {Number} data.currentHeight The current editor height (before resizing).
* @param {Number} data.newHeight The new editor height (after resizing). It can be changed
* to achieve a different height value to be used instead.
*/


Tim Gorski

Hi Andy... in response to your last post..

The description fields DO NOT expand based on the content. If you were to scroll to the bottom by using the arrow keys (before my changes), and add content, the box still didn't expand. The only way to expand the height of the box itself was to push and hold down the cntrl key... wierd stuff.

With my config.js entry, the box doesn't expand, but at least you can scroll to where you need to be and change things. There is a line in that code where you can make the minimum height if it needs to be adjusted.

Tim Gorski

I've tried in Firefox and Chrome and it's fine. Can you add some content to a product on our demo store

http://www.ectdemostore.com/vsadmin/adminprods.asp

User: mystore
Password: changeme

as that expands correctly for me here.

Andy

Please feel free to review / rate our software

Indeed, yours work perfectly. it does expand with content. I do notice that the demo store version is 6.8.4... I am experiencing this on 6.8.5.
Everything works fine on our stores with previous versions as well.

Tim Gorski

I tried on anther 6.8.5 store and it was fine there - I'm wondering if it could be a browser plugin or something like that causing it.

Andy

Please feel free to review / rate our software

It happens on my business partners computers as well. As I said it happens on ALL browsers on all 6.8.5 cart versions on our end.
We have downloaded the ckeditor from ECT again, and i am going to try to reinstall it. I will report back with the results.

Tim Gorski

A HA!

I reinstalled and before trying to configure the editor.css file location, IT WORKED! As soon as I connected the editor.css POOF - broken.

So now I have to debug the css... basically I used the responsive cards css, copied it and added an entry to make the background white. I am going to have to strip this down to the neccesary elements that are visible on the editor i.e. font sizes, colors, etc.

Tim Gorski

I hadn't thought of that but it makes perfect sense.

Andy

Please feel free to review / rate our software

This was the offending css code...

html {
font-family: Arial, sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}

I deleted -webkit-text-size-adjust: 100%; and -ms-text-size-adjust: 100% and it now works as it should.

Thanks for your time.


Tim Gorski