Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

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

Avatar

Former Community Member

Hi,

I have component which is displayed correctly on AEM 6.1. However, when I moved it to AEM 6.1 SP1 server, it caused display problem on edit mode on touch UI. The display problem happened on Edit mode on touch UI. it is fine for the preview mode and the classic UI.

After comparing the difference between the AEM 6.1 SP1 and AEM 6.1, I noticed div and iframe height calculated from the AEM 6.1 SP1 seems wrong for this page.

In AEM 6.1 SP1 server:

<div id="ContentWrapper" style="height: 662px;">
    <div id="FullScreenMask" style="display: none;"></div>
    <iframe width="100%" height="500" frameborder="0" allowfullscreen="" id="ContentFrame" src="/content/xxx/testhome.html" style="height: 662px;"></iframe>
</div>

while in AEM 6.1, it is

<div id="ContentWrapper" style="height: 4276px;">
    <div id="FullScreenMask" style="display: none;"></div>
    <iframe width="100%" height="500" frameborder="0" allowfullscreen="" id="ContentFrame" src="/content/xxx/testhome.html" style="height: 4276px;"></iframe>
</div>

Any suggestion for fix this?

Thanks in advance.

26 Replies

Avatar

Level 1

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

Avatar

Level 1

Hi folks,

I found fix for AEM 6.1 for Edit mode view.

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

html, body {
  1.    margin: 0;
  2.    padding: 0;

html {
  1.    height: 100%;

body {
  1.    height: auto;

Avatar

Level 10

WHen this type of issue happens for a custom component - look at the CSS. Also - is anyone seeing this happen on AEM CORE Components?

Avatar

Level 1

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

Avatar

Level 1

Is this issue has been fixed? I am facing a similar issue in AEM 6.4