Sightly - no decoration

[deana66659071]

I have a case where I want to include an authorable header into my page.

Example:              <div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/utility-par' @ wcmmode='disabled'}" data-sly-unwrap></div>

However, our end users do not want the <div class="new section"></div> on the page (shows unnecessary space) when they are authoring another page ... this is what happens in place of the parsys in author mode.

I'd like to use something like NO-DECORATION or something like that.

Is this possible?

Thank you in advance for any assistance.

-Dean

[Kunal_Gaba_]

If you want to remove the divs in all modes including edit mode then you can add cq:noDecoration property on the component node. 

https://docs.adobe.com/docs/en/cq/5-6-1/developing/components.html

      

cq:noDecoration

Boolean

If true, the component is not rendered with automatically generated div and css classes.

[deana66659071]

I've tried this, but it does not work in author mode.  

I have something like this:

page-header

  jcr:content

    main-par

      component

      component

Since the page-header is authorable I want all components to be used on the page header.

Once the author has completed with authoring the page, I include the content of the parsys in other pages ... as follows:

    This is in the header.html of the actual "page" base component.

            <div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/main-par' @ wcmmode='disabled'}" data-sly-unwrap></div>

Unfortunately, when it renders in author mode, it includes:

            <div class="new section"></div>

where the parsys would be .... 

I do not want to display that div even in author mode of the other pages ... 

page-header - yes, need it to display the parsys

newPage - no, the header is included in the header.html but DO NOT want the div's to display

[edubey]

I have seen this behavior of "new section" extra empty div if your are talking.

I don't think you will get an option to remove them in author, probably

x = document.getElementsByClassName("new section"); /* Then iterate all element and hide their visibility */

But I still wonder you will see parsys text on page in weird way

[deana66659071]

edubey wrote...

I have seen this behavior of "new section" extra empty div if your are talking.

I don't think you will get an option to remove them in author, probably

1. x = document.getElementsByClassName("new section");
2. /* Then iterate all element
3. and hide their visibility */

But I still wonder you will see parsys text on page in weird way

~~This is an option, but I would think there would be an option available in Sightly to make sure these tags do not appear at all.

Sightly is adding them directly to the component, when I'm asking them not to via "wcmmode=disabled"

[Kunal_Gaba_]

Refer the solution in the following thread- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

[deana66659071]

kunal23 wrote...

Refer the solution in the following thread- http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

These tags are visible from slightly.  They are generated by the slightly and I cannot remove them ... example is here:

Here is the HTML from the component:

~<header data-sly-use.abc="ewcm.sightly.components.ResourceUtility">
 <section class="utility-header">
  <div data-sly-test="${!abc.isUtilityParsysEmpty}" data-sly-unwrap>
   <div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/utility-par' @ wcmmode='disabled'}" data-sly-unwrap></div>
  </div>
 </section>
 <section class="main-header">
  <div data-sly-test="${!abc.isMainParsysEmpty}" data-sly-unwrap>
   <div data-sly-resource="${'/content/aemhelp/hidden/header/jcr:content/main-par' @ wcmmode='disabled'}" data-sly-unwrap></div>
  </div>
 </section>
</header>

I'm purposely telling it NOT to allow someone to edit the header by using wcmmode=disabled.  Shouldn't that tell the slightly NOT to display the extra div with class of "new section"?

Here is the result ...

Please NOTICE the div with ""new section" ....

<header>
 <section class="utility-header">
 </section>
 <section class="main-header">
  <div class="columnControl parbase section">
   <section class="VS-T-0 VS-B-0   white-border">
    <div class="none-opacity-0">
     <div class="container">
      <div>
       <div class="row row-eq-height   white-border ">
        <div class="col-ewcm-xs-12 col-ewcm-md-12  noColumnPadding" data-index="col0">
         <div>
          <div class="image parbase section">
           <a target="_self" href="http://www.abc-company.com">
            <p class="image-align leftAlignment">
             <img class="VS-T-60 VS-B-20 " alt="ABC Company" src="/content/aemhelp/hidden/header/_jcr_content/main-par/columncontrol/col0/image.img.png">
            </p>
           </a>
          </div>
          <div class="new section"></div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>
  </div>
  <div class="columnControl parbase section">
   <section class="VS-T-0 VS-B-0   white-border">
    <div class="bright-green-background-opacity-0">
     <div class="container">
      <div>
       <div class="row row-eq-height   white-border ">
        <div class="col-ewcm-xs-12 col-ewcm-md-5 col-ewcm-sm-6 " data-index="col0">
         <div>
          <div class="seoHeadline section">
           <div class="leftAlignment VS-T-20 VS-B-20">
            <h1 class="hugeCascade white-fontCascade">
             <b>Help with AEM</b>
            </h1>
           </div>
          </div>
          <div class="new section"></div>
         </div>
        </div>
        <div class="col-ewcm-xs-12 col-ewcm-md-7 col-ewcm-sm-6 " data-index="col1">
         <div>
          <div class="new section"></div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>
  </div>
  <div class="new section"></div>
 </section>
</header>