Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

'ContentFrame iframe' and 'ContentWrapper' height increase infinitely

Marcelo_Cortez
Level 1
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
Marcelo_Cortez
Correct answer by
Level 1
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

2 Replies
Marcelo_Cortez
Correct answer by
Level 1
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

kautuk_sahni
Community Manager
Community Manager
Appreciate you sharing answer with broader community.