Level 2

Removing unsued divs in components

Forum|Forum|5 years ago
February 29, 2020
1 reply
5453 views

I'm using/customizing AEM core components but they generate a bunch of unused divs, is there a way to turn these off or remove them.

Thanks

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

BrianKasingli

Community Advisor and Adobe Champion

Hi @aemfrontend,

The automatically rendered HTML element can be controlled via Decoration Tag, out of the box behavior by AEM.

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.
- Other property names will be added as HTML attributes with the same String value as provided.

Visit Adobe's documentation about Decoration Tags here - https://docs.adobe.com/content/help/en/experience-manager-64/developing/components/decoration-tag.html

A

aemFrontendAuthor

Level 2

@briankasingli

Thanks for the quick response.

Tried the cq:noDecoration = true this method works but you cannot edit the component in the edit mode, is there another way to use/access the property in the HTL directly

BrianKasingli

Community Advisor and Adobe Champion

Hello Shawn,
Here's a quick fix, try this:
1. use cq:noDecoration

2. add custom code into HTL as follows:

<div 
     data-sly-unwrap="${wcmmode.disabled}"
     class="section"
     style="user-select: auto;">
     <<<<YOUR_CODE_GOES_HERE>>>>
</div>

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded