Additional decorative tag for inner components

Question

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 Answer

Hi! you can follow this blog to get your answers.  https://aemcorner.com/aem-how-to-remove-div-wrapper-from-component/ Thanks, Bilal

Fanindra_Surat · Answer

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.html?lang=en

Hope this helps you!

Component Controls

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded