Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Removing unsued divs in components

aemFrontend
Level 2
Level 2

shawns34163620_0-1582990147586.png

 

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

 

7 Replies
BrianKasingli
Community Advisor
Community Advisor

Hi @aemFrontend,

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

  1. 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.
  2. 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.ht...

aemFrontend
Level 2
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
Community Advisor

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>
aemFrontend
Level 2
Level 2

Thanks, @BrianKasingli  but no luck I still cannot edit the component in the template

BrianKasingli
Community Advisor
Community Advisor

What does the rendered code look like after you apply this?
Try this:

// show div when in edit mode, else hide.
// I've added the section class && changed the conditional

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

 

aemFrontend
Level 2
Level 2

Finally, got back to this; found `${wcmmode.disabled}` removes the wrapper `div` in publish mode only way I was able to get it done...

 

 

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

ref: http://aemconcepts.blogspot.com/2017/03/wcmmodes-aem.html