AEM 6.4 - Touch UI: The height of the #ContentFrame keeps growing in edit mode

[Endoriel]

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!

[Ravi_Pampana]

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;}

[kautuk_sahni]

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

[Endoriel · Accepted 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.

[Prahlad]

Thanks for the clue.

[gparsonsdeu]

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?

[gparsonsdeu]

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.

[Endoriel]

My advice is to try either:

• Create a clientlib only loaded in Author and overwrite your styles by setting an acceptable fixed height or a max-height if that's possible
• Create a clientlib only loaded in Author, overwrite your vh style and then resize your elements with JavaScript to their correct size. If you have anything dynamic try doing it in the "cq-contentframe-layout-change" event.

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]

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]

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]

That is probably it. Will add the hook, thank you!