You're viewing help content for version:

The editor in the touch-enabled UI makes use of overlays to interact with content confined in an iframe. This interaction creates some limitations in both usage of the editor and also for developers. This page summarizes these limitations and provides solutions or work-arounds where possible.

Functional Limitations

An author may encounter the following functional limitations when using the editor to author pages.

Links Not Active

When editing a page, links are not active.

Image Drag-And-Drop

Drag and drop images not possible inside in-place RTE.

CSS Limitations

A developer may encounter the following limitations with the editor's interactions with CSS.

Absolutely Positioned Elements

Absolutely positioned elements can cause issues in the position of their overlay.

  • If this happens, make sure that the dimensions of the absolutely positioned element are correct because the editor will create an overlay with the exact same dimensions.

vh Units

vh units are not supported because the iframe height must be automatically adjusted by AEM.

Fixed Background Images

Fixed background images may not be displayed as fixed when scrolling due to the fact that it is embeded within an iframe.

  • Selecting View Page as Published in the header bar actions displays the page properly.

100% Height

100% height is not supported on a page's body element.

  • A work-around is possible in order to implement a fullscreen body by "stretching" the body element as follows:
body {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

Floating Via CSS

On a page containing components floating via CSS, only the viewport area visible on initial load is accessible.

  • A work-around is possible by adding the following CSS at the end of the page after the floating area:
<div style="clear:both"></div>

Margin Collapsing

Margin collapsing problems can be seen if the first child element of the body element has a margin. 

  • The solution is to add a clearfix at the body element level such as follows:
body:before, body:after{
    content: ' ';
    display: table;