AEM 6.0 - Preview Mode Still Has Edit Bar Placeholders - How to Remove "new section" Divs

[timlwhite]

Hello - 

 When entering "Preview" mode in AEM 6.0, the edit header is gone, but the "add component here" divs (with class="new section") are still there (although empty), and still have a defined height.  As a result the page looks terrible, as it's full of space where the edit bars were.

 Why are these still here in "Preview" mode, and can I set up AEM to not include them?

 Thanks!

Tim

[Kunal_Gaba_]

You can remove this divs by adding the following lines of code in global.jsp file- 

(WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) { IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE); }

[timlwhite]

This snippet did not work, and I was unable to remove it once I put it in my global.jsp - I had to rebuild my server completely because the JSP cache would not clear.  I tried adding the imports that weren't called out in the snippet above, and that caused yet more errors. :)

[Kunal_Gaba_]

Apologies for the wrong code snippet. You can follow this KB article for the correct API - https://helpx.adobe.com/experience-manager/kb/ComponentDiv.html. 

 This should fix the problem-

<%@ page session="false" import="com.day.cq.wcm.api.WCMMode, com.day.cq.wcm.api.components.IncludeOptions" %> if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) { IncludeOptions.getOptions(getRequest(), true).setDecorationTagName(""); }

[timlwhite]

Specifically -  here is a screenshot of what "Preview Mode" for a page.  You can see that the "<div class="section new"> are still there, although the CSS is setting them to display:none.

Unfortunately, this causes lots of issues with the CSS and HTML structure in a responsive design, so we always have to have our authors use ?wcmmode=disabled to preview their content, instead of using preview mode.  They are finally revolting wondering why AEM Preview Mode "doesn't work".

In addition, when including templates, even if we set wcmmode=disabled as part of the include, the placeholders are still included, and not set to display:none.

So if we need one part of the template to only be authorable in one place, but not included on every page, it will still space out the included template as if the edit zone were there:

<section class="utility-header"><div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/utility-par' @ wcmmode='disabled'}" data-sly-unwrap></div></section>

Even with that include, the <div class="section new"> elements are coming through from that resource include in edit mode (and display:none in preview mode), even though the resource is coming through as wcmmode=disabled.

Thank you!

[Kunal_Gaba_]

Thanks for the detailed explanation. I didn't know that you were using sightly to include the components. Please refer the following thread which has solution to this problem - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

I guess your custom par - /content/aemhelp/hidden/header/jcr:content/utility-par should inherit /libs/wcm/foundation/components/parsys and not /libs/foundation/components/parsys

[timlwhite]

Yes, I tried that as well, and it made no difference...

[leeasling]

I can't offer a fix because i don't believe there is one for this issue (it get's posted a lot), but, a somewhat work around to make this easier on your authors would be to add a "Preview" link to the page some where, maybe affixed to the footer, that when clicked opens the current page URL with ?wcmmode=disabled appended.  It's not perfect, but it works.