Highlighted

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

Qian416

17-05-2016

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.

Replies

Highlighted

Qian416

18-05-2016

The bottom part of the component does not displayed in the Touch UI Edit mode, it is cut in the middle. Also there is an inner vertical scroll bar which is not able to scroll.

Highlighted

Qian416

23-06-2016

No, we do not find the solution. We switched to use the classic mode for the content edit to avoid this issue.

Highlighted

esu2805

06-10-2016

Hello,

Did anyone get any solution for this? I am having the same issue. And the height of iframe and ContentWrapper div keeps increasing drastically for me.

I am using AEM6.1 with sp2. I tried the hot fix 9440 too, but doesn't seem to be working. If someone got it resolved, please share.

Thanks!

Highlighted

acquitya8239301

04-01-2017

We are facing the same problem since installation of SP2. We have tried CFP 1, 2 and 3 however the issue still remains unresolved. Touch UI renders only the page area visible at screen load whereas the remaining page when scrolled is rendered as Gray due to styling of overlay div height as per my understanding.

Highlighted

Jdruwe

22-02-2017

Same issue here: Adobe Experience Manager (6.1.0.SP2-CFP4) but still stops rendering. Any updates on this issue?

Highlighted

ekta_aggarwal

03-05-2017

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.