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!
Solved! Go to Solution.
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.
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;}
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
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));
Views
Replies
Total Likes
That is probably it. Will add the hook, thank you!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies