Remove auto generated div tag around the components | Community
Skip to main content
G
gihanperera
New Participant
September 11, 2017
Solved

Remove auto generated div tag around the components

  • September 11, 2017
  • 7 replies
  • 9037 views

Hi all,

Need help to get rid of the auto generated extra div wrapper around the components ?  But this should be publisher mode only. Author mode need to be have that because of the editing panel.

Note that im using HTL (Not JSP) and i cannot edit global.js because i need that extra div wrapper on some component as well.

im using AEM 6.2 .

Kindly 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 Feike_Visser1

    you can do data-sly-unwrap="${wcmmode.disabled}" then the div is removed is non edit mode.

    so

    <div ... data-sly-unwrap="${wcmmode.disabled}" ></div>

    7 replies

    rahulp76079001
    rahulp76079001
    New Participant
    July 26, 2021

    create cq:htmlTag node as nt:unstructured,

    create property cq:tagName and leave it blank.

    This seems perfect solution for removing default wrapper from a component.

    This node can be used to set any class and to change the wrapper element.

      ajinkayk6258253
      ajinkayk6258253
      New Participant
      August 28, 2019

      can anybody provide solution for jsp component

      Y
      ybharath264
      New Participant
      June 4, 2018

      Could you please post an example for this one.

        susheel
        susheel
        New Participant
        September 14, 2017

        you can use cq:htmlTag node in your component to generate your custom div with custom class.

        cq:tagName : Here you can define the div or section or whatever tag you need.

        I observed that if we don't provide cq:tagName the extra div itself is not getting generated (tested in 6.1 SP2)

        So may be you can use this way.

          Feike_Visser1
          Feike_Visser1Accepted solution
          Employee
          September 13, 2017

          you can do data-sly-unwrap="${wcmmode.disabled}" then the div is removed is non edit mode.

          so

          <div ... data-sly-unwrap="${wcmmode.disabled}" ></div>

            AnkurAhlawat-1
            AnkurAhlawat-1
            New Participant
            September 13, 2017

            Have you tried below property

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

            You can apply this to specific components for which you dont want wraper divs. For more info visit Decoration Tag

            kautuk_sahni
            kautuk_sahni
            Employee
            September 13, 2017

            Try this:-

                 <sly data-sly-resource="${'foo' @ decorationTagName=(wcmmode.<Mode>? '':'div') , resourceType='my/resource/type}"/>

            Feike Visser What do you think here?

            ~kauutk

            Kautuk Sahni
            Terms & ConditionsAccessibility statement

            Loading footer...