Removing unsued divs in components | Community
Skip to main content
A
aemFrontend
Level 2
February 29, 2020

Removing unsued divs in components

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

1 reply

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
February 29, 2020

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

    A
    aemFrontendAuthor
    Level 2
    February 29, 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

    BrianKasingli
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    March 3, 2020

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


    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>

     

    Terms & ConditionsAccessibility statement

    Loading footer...