Highlighted

Removing unsued divs in components

shawns34163620

29-02-2020

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

 

Replies

Highlighted

BrianKasingli

MVP

29-02-2020

Hi @shawns34163620,

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

Highlighted

shawns34163620

29-02-2020

@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

Highlighted

BrianKasingli

MVP

29-02-2020

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

BrianKasingli

MVP

02-03-2020

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>