Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Removing unsued divs in components

Avatar

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

Avatar

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...

Avatar

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

Avatar

Community Advisor

You can create a java model to check preview/publish mode and add decoration tag.

Example -

https://aemlab.blogspot.com/2018/11/aem-restrict-component-editing-and.html

 



Arun Patidar

Avatar

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>

Avatar

Level 2

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

Avatar

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>

 

Avatar

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