Removal of auto generated wrapping div tag around the components in AEM 6.4 | Community
Skip to main content
A
AshwiniPa
July 30, 2021
Solved

Removal of auto generated wrapping div tag around the components in AEM 6.4

  • July 30, 2021
  • 3 replies
  • 2724 views

Hi Everyone,

 

I tried removal of wrapping div around the components in AEM 6.4 using these options below , but it did not work either in edit mode or preview mode.

Requirement : It should be removed on both the publisher as well as author/edit mode.

Author mode should also work properly and I should be able to edit the components.

I am using HTL and NOT JSP.

 

Options tried :

  • Using <div ... data-sly-unwrap="${wcmmode.disabled}" ></div> to remove additional div in non edit mode. --> Doesn't work for edit mode. Cannot edit the component anymore.
  • Tried adding getRequest().setAttribute(ComponentContext.BYPASS_COMPONENT_HANDLING_ON_INCLUDE_ATTRIBUTE, false); code in activate method of java class extending WcmUse class --> But this removed the wrapping div for all components added on the page except the first component.
  • Explicitly tell AEM not to wrap the component using cq:noDecoration. --> Doesn't work for edit mode. Cannot edit the component anymore.

  • Create cq:htmlTag node as nt:unstructured, create property cq:tagName and leave it blank. --> Doesn't work for edit mode. Cannot edit the component anymore.

Please help on this matter.

 

Thanks.

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

Hi,

Wrapper div is needed for Authoring components, you can swaitch to another HTML element except div e.g. section, article if thats serve your purpose.

You can remove though from publihser

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity AdvisorAccepted solution
Community Advisor
July 30, 2021

Hi,

Wrapper div is needed for Authoring components, you can swaitch to another HTML element except div e.g. section, article if thats serve your purpose.

You can remove though from publihser

Arun Patidar
    Prince_Shivhare
    Community Advisor
    Prince_ShivhareCommunity Advisor
    Community Advisor
    July 30, 2021

    @ashwinipa 

    I had this issue earlier, but in my case, div tags were creating additional space even if it a test condition.

    so I removed the <div> tags and used only <sly> where ever I can use.

    the options which you are tried didn't work for me as well.

      MarkusBullaAdobe
      Adobe Employee
      MarkusBullaAdobeAdobe Employee
      Adobe Employee
      August 2, 2021

      Hi @ashwinipa!

      As @arunpatidar already pointed out, it is not possible to remove the auto-generated DIV tags while keeping the ability to edit components.

      AEMs authoring user interfaces takes the additional DIVs to inject editing capabilities and UI elements and allows you to edit components. While it is possible to change the decoration tags to another HTML tag, there is no way to do both: remove the decoration tags altogether and being able to edit the page/components.

      It's totally possible - and you've already listed various ways to do so - to remove decoration tags on the publish side. But you will need to keep them on the authoring side.

       

      Hope that helps!

        Terms & ConditionsAccessibility statement

        Loading footer...