Expand my Community achievements bar.

SOLVED

Additional decorative tag for inner components

Avatar

Level 1

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:

vjalaldeen_0-1678214406209.jpeg

Output:

vjalaldeen_1-1678214419098.jpeg

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

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

 

Thanks, Bilal

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

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

 

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

 

Thanks, Bilal

Avatar

Community Advisor

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!