AEM wrap by default each component html placed in a page with a DIV tag with an associated class named matching the component name:
<div class="mycomponentname"> ... ... </div>
This wrapper DIV is used by AEM especially for edit mode purpose. Normally you just do not care about this DIV and sometimes you can also use it in order to style your component by css.
But what happen if you want to remove this DIV?
You may ask, why I should want to remove the DIV wrapper? You may want to remove it for any reason, for example a common case you need to exactly reproduce a provided html layout that you cannot modify.
There are mainly 3 ways to hide or remove the decorator DIV wrapping component:
1. Define property cq:noDecoration=true
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Component"
jcr:title="Image Render"
sling:resourceSuperType="foundation/components/image"
cq:noDecoration="true"
componentGroup=".hidden"/>
It’s the easiest way … but I think is probably almost useless because removes it in all cases, even on edit mode … so component will result not editable at all.
2. Use IncludeOptions forceSameContext
You can place this simple Java code instruction before including the component:
IncludeOptions.getOptions(getRequest(), true).forceSameContext(Boolean.TRUE);
It can be invoked either into a JSP (CQ5) or by Java/Javascript API (AEM6+Sightly).
It removes the DIV wrapper only for the next rendered component. So it will not apply to other included components that will continue to be wrapped on its own DIV.
It can be useful especially when you handle a component embedded into page template since you can add the instruction only if you are not in edit mode.
3. Use attribute BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE
request.setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false);
(importing com.day.cq.wcm.api.components.ComponentContext)
Also this instruction is a piece of Java code you can use in a similar way as mentioned above.
Rather than the previous option, it removes the wrapper DIV for all next rendered components until the request is run out or you explicitly disable it.
any new way to do this just with sightly?
Also you can create a node under the component folder with the name cq:htmlTag and add a string property cq:tagName with the value span. On this way aem wrap the component with a span instead of Div and maybe you can mantain the styles without problems and is also editable under parsys 🙂
Hi Daniel,
if you can introduce a span without affecting layout it could be a good way. In fact we mentioned it into https://aemcorner.com/how-to-customize-div-wrapper-from-component/
Thanks
Thanks for thoses informations that were fo great help for me.
Just one complementary point and a remark about the third point :
Firt, the import associated is “com.day.cq.wcm.api.components.ComponentContext”. I include it in my comment to help others. It’s take me a while before finding it.
And in the jsp, I use “request.setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false);”
and not “request().setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false);”, i.e. request without parenthesis.
Thanks Ronan for your suggestions, we promptly update it
Hi RONAN LE GALL, I'm facing this problem and i want to fix this issue. Can you suggest me if i can use this approach over java class using ComponentContext.
All points above have some pros and cons unfortunately. I have also noticed that there is also another option using Sightly data-sly-resource with sly tag or with data-sly-unwrap, i.e.:
Then component is rendered without decorating div. For edit mode, additional logic can be added that will use include with normal element like div. But there is also drawback that it is good solution only for statically included components, it will not work for components dropped to parsys.
The better approach might be implementing custom parsys base on foundation one which could use i.e. option 2 before including all components to disable decoration in preview/publish mode. If only some of the components should have decoration disabled then additional property for component resource type could be introduced and checked by parsys logic properly to add IncludeOptions before it or not.
Hi Kamil,
thank you for reply.
The post was addressed to all scenarios where CQ/AEM automatically add the tag decorator around components, in order to have the possibility to skip it if you need. For example when you have a parsys into the page and you wouldn’t want to create a custom version.
For sure a sightly static inclusion doesn’t have a tag decorator by default, for this reason it has not been mentioned.
Cheers
Hi Gaetano,
Thank you for the response. I agree that with data-sly-resource decoration tag is not added by default. Additionally HTML element used for include which might be ommited by using data-sly-unwrap or just sly element. That was difficult to achieve with JSP cq:include without losing possibility to edit component so that using Sightly data-sly-resource seems to solution for statically included components.
Regarding components in parsys, the second and the third options allow to disable div wrapper for the components included before invoking the code. I only see it difficult to be applied for some of the components in parsys without modifying this parsys itself.
All the best,
Kamil