Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

'ContentFrame iframe' and 'ContentWrapper' height increase infinitely

Avatar

Level 1

I did some testing and the issue happens on any kind of page, with any kind of content (or even without content), and with or without the site header and footer.

However, the issue doesn't happen on experience fragments, template editing, layout editing, or other places... Only on author view, while editing a page.

There is a problem reported by some users, about that issue since AEM 6.1. I'm already running the latest version and the issue persists, on two different projects

Apparently, that issue is caused when there is anything on the page (component, header, or whatever) that has specific definitions on CSS. The definitions can be:

  1. position: absolute
  2. negative margin
  3. height with 'vh'

Tried the solutions suggested by other users in other places, none worked.

Couldn't find any official post from Adobe about the issue, and no official solution.

1 Accepted Solution

Avatar

Correct answer by
Level 1

Solved the problem with the same answer of this posts: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-2-in-editor-mode-con...

"In AEM editor mode, #ContentWrapper <div> gets dynamically injected from 'ContentFrame.js' file. You can located this file at /libs/cq/gui/components/authoring/editors/clientlibs/core/js/ContentFrame.js (this is the path in AEM 6.4 not sure about earlier versions). This file has a functions 'getDocumentHeight' which returns maximum of "(doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight)" and causes page height in edit mode to go infinite. Change this function to return "Math.min()" instead of "Math.max()" to accurately calculate height of the pages in AEM edit mode.

 

DO NOT CHANGE anything in the original file located under '/libs' instead create an overlay '/apps/cq/gui/components/authoring/editors/clientlibs/core/js/ContentFrame.js' and make this change."

View solution in original post

3 Replies

Avatar

Correct answer by
Level 1

Solved the problem with the same answer of this posts: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-2-in-editor-mode-con...

"In AEM editor mode, #ContentWrapper <div> gets dynamically injected from 'ContentFrame.js' file. You can located this file at /libs/cq/gui/components/authoring/editors/clientlibs/core/js/ContentFrame.js (this is the path in AEM 6.4 not sure about earlier versions). This file has a functions 'getDocumentHeight' which returns maximum of "(doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight)" and causes page height in edit mode to go infinite. Change this function to return "Math.min()" instead of "Math.max()" to accurately calculate height of the pages in AEM edit mode.

 

DO NOT CHANGE anything in the original file located under '/libs' instead create an overlay '/apps/cq/gui/components/authoring/editors/clientlibs/core/js/ContentFrame.js' and make this change."

Avatar

Administrator
Appreciate you sharing answer with broader community.


Kautuk Sahni

Avatar

Level 1

I you do that modification in a page where you can add several componentes, then a grey overlay appears, because the iframe height is fixed and it is not growing dynamically. This is not a good solution.