AEM 6.1 SP1 Component height not calculated correctly in edit mode touch UI

I have just had the same problem with AEM 6.2 SP1 and put this in place in one of the client libs for the widgets

(function ($, ns, channel, window, undefined) {

    "use strict";

    $('#ContentFrame').load(function() {

    $('#ContentFrame').height($('#ContentFrame')[0].contentWindow.document.body.scrollHeight+"px");

});

}(jQuery, Granite.author, jQuery(document), this));

Hi folks,

I found fix for AEM 6.1 for Edit mode view.

Just add right styles for html, body tags in <iframe>.

1.    margin: 0;
2.    padding: 0;

}

1.    height: 100%;

}

1.    height: auto;

}

Is there any update on this issue ? We are facing a similar issue

Hi,

This bug is also happening in AEM 6.3. Can anyone tell me if there's a hotfix I can install to get this resolved?

Thank you, I appreciate it.

We were using Material Design Lite. With the help of Adobe Support, we identified this class as the culprit:

.mdl-layout__container {

    position: absolute;

    width: 100%;

    height: 100%;

}

I had to remove it completely (showed up twice in the OOTB MDL CSS), but that did the trick.

It is a known bug, Please create a daycare ticket for this.

Some Workarounds:-

1. introduce page refresh when switching to preview, as pointed out in this blog article
2. implement at project level a new action in the page header, as mentioned in the documentation that opens the page with ?wcmmode=disabled (removing the editor.html and adding ?wcmmode=disabled works)

"View as published" feature got  introduced from AEM 6.2, please re;quest for back porting.

I hope this would help.

~kautuk

Running into this issue with AEM 6.2 as well.

UPDATE:

The issue is in "/libs/cq/gui/components/authoring/editors/clientlibs/core.js" the "currentHeight" is always equal to the "targetHeight" so no resizing takes place.
 

/** * Resets the height of the ContentWrapper and ContentFrame; used to adjust the iframe height when a change occurs inside of the content page * This is called on cq-contentframe-layout-change event * * @memberOf Granite.author.ContentFrame * @alias resetContentHeight */ self.resetContentHeight = function () { var document = self.getDocument().get(0); var getDocumentHeight = function(doc) { return Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, doc.body.offsetHeight, doc.documentElement.offsetHeight); }; if (document) { var currentHeight = self.iframe.height(); var targetHeight = getDocumentHeight(document); // Height of the iframe content var editorHeight = $(window).height() - self.topOffset; // Height of the editor (window - toolbar) if (targetHeight < editorHeight) { targetHeight = editorHeight; } if (currentHeight !== targetHeight) { window.requestAnimationFrame(function () { self.wrapper.height(targetHeight); self.iframe.height(targetHeight); }); } } };

I have asked internal team to have a look at this one.

~kautuk

Guys,

Is this a known issue and reported with AEM 6.1 SP. Can you point me to the known issues listing where this is listed.

Hi,

I was also facing the same issue with AEM 6.2 in Touch UI edit mode, Height of ContentWrapper and iframe was increasing drastically throughout the site.

The reason was, we were using a css class in our base page with the below properties, which was somehow impacting the ContentWrapper class:

.wrapper {position: relative;min-height: 100%;margin: 0 auto -298px; }

here, the bottom margin was given in -ve that's why height of ContentWrapper and iframe was increasing drastically in author mode.

To fix this issue, setting the bottom margin property to positive value solved the problem as in below example:

.wrapper {position: relative;min-height: 100%;margin: 0 auto 0px; }

Note: The ContentWrapper class is only added in Touch UI edit mode that's why the issue was coming only in this mode not in classic and preview mode.