Additional decorative tag for inner components

[vjalaldeen]

Hi all,

I am trying to create component with inner container. it add additional decorative div for container and inner component added in container. it breaks the expected output. anyone help me to remove the 2 decorative tags created for inner container and inner component.

code:

Output:

[bilal_ahmad · Accepted solution]

Hi! you can follow this blog to get your answers. 

https://aemcorner.com/aem-how-to-remove-div-wrapper-from-component/

Thanks, Bilal

[Rohit_Utreja]

@vjalaldeen 

Please have a look at the similar thread to disable decoration tag
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/removing-decoration-wrappe...

I hope it helps.

[Fanindra_Surat]

Hi @vjalaldeen -

This can be achieved OOTB, and the following is straight out of the documentation:

Component Controls

The following properties and nodes can be applied to the components to control the behavior of their decoration tag:

• cq:noDecoration {boolean}: This property can be added to a component and a true value forces AEM not to generate any wrapper elements over the component.

• cq:htmlTag node : This node can be added under a component and can have the following properties:

  • cq:tagName {String} : This can be used to specify a custom HTML tag to be used for wrapping the components instead of the default DIV element.
  • class {String} : This can be used to specify css class names to be added to the wrapper.

Ref: https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

Hope this helps you!