


Hi,
I have seen similar issues have been addressed on the forum for AEM 6.1 and 6.2. The resolution was either eliminating relative sizes from the custom CSS or installing a hotfix. I seem to have a similar issue in AEM 6.4.
I can't see any CSS clash. Is there an existing known issue for AEM 6.4 related to this? My page contains an angular app. After the initial content load in edit mode the height on the ContentFrame iframe and ContentWrapper div increases to infinity.
Any help would be very much appreciated!
Endoriel
Endoriel
31-08-2018
The issue was that I was trying to overlay an invisible component added at the bottom of the page on top of the app by using position: absolute and height: 100% and this was causing the infinite resize. I went with a javascript solution instead and it seems to work.
Actually just adding any blank component to a blank page - if the component has a dialog and the component has position absolute and height 100% - this will cause an infinite ContentFrame height resize in the AEM TouchUI authoring interface.
Ravi_Pampana
MVP
Ravi_Pampana
MVP
22-08-2018
I saw similar issue when using vh(view port height) css for a html tag in the page. When using vh in author instance, it will consider the authoring div and keep on increasing the height of the contentwrapper. To avoid this use other than vh css or change css to px in author mode alone.
.container { min-height: 100vh;}
gparsonsdeu
gparsonsdeu
13-09-2018
That is probably it. Will add the hook, thank you!
Endoriel
Endoriel
13-09-2018
How are you including your clientlib? cq-layer-activated is an event in the editor not in your page so you need to add the category cq.authoring.editor.sites.page.hook
Otherwise this works for me:
(function ($, ns, channel, window, undefined) {
"use strict";
channel.on('cq-layer-activated', function (event) {
console.log('cq-layer-activated', event);
});
}(jQuery, Granite.author, jQuery(document), this));
gparsonsdeu
gparsonsdeu
12-09-2018
Yep rhis is exactly what I did, but it’s a source of difference between edit and publish modes. iOS it be possible for the editor to detect it’s in an infinite resize loop and stop?
Also I cannot for the life of me get the editor change listener to work. I have a client lib js file I know is running on page, but the editor mode changes do not work.
I have this:
console.log('Editor Init');
/* global Granite, jQuery, document */
(function ($, document) {
$(function () {
document.on('cq-layer-activated', function (event) {
console.log('cq-layer-activated', event);
console.log(Granite.author.layerManager.getCurrentLayer());
});
});
})(Granite.$, jQuery(document));
I see the editor init console but nothing else.
Endoriel
Endoriel
12-09-2018
My advice is to try either:
The problem is that your page is loaded in an iframe and it's important to have a predetermined fixed height. Things like vh, position absolute+height 100% and others don't really work unfortunately.
gparsonsdeu
gparsonsdeu
11-09-2018
Also just doubled checked, putting a calc height on the body itself will also cause the page to infinitely expand. So the fact that I am using another TemplatedContainer is not related.
I simply put:
In my clients CSS.
gparsonsdeu
gparsonsdeu
11-09-2018
This appears to happen whenever a component uses calc in its height as well.
I have a custom component called content that uses a repeater to render any children in it, its essentially a version of what the core body has in it, but allows us to specify a template component that holds our content:
aem-core-wcm-components/body.html at master · Adobe-Marketing-Cloud/aem-core-wcm-components · GitHub
Our component has:
If this component has its height calculated using calc(100vh - #{$footer-height}) the content expands infinitely.
We want to use this custom content component so it can be decorated with styles at the template level not just the extension of v2 page. When building this we found that including the TemplatedContainer in our component allows any content from the page to be rendered inside of our content. It works fine in preview and publish modes, but breaks the editor iframe.
Any advice?
kautuk_sahni
Community Manager
kautuk_sahni
Community Manager
23-08-2018
This could be margin collapsing between the body element and its children.
body:before, body:after{
content: ' ';
display: table;
}
or
.container:before, .container:after {
content: ' ';
display: table;
}
-Kautuk