Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Remove the div generated by the parsys or add custom clases to it

Avatar

Level 1

I have the next line in one of the components I'm working on. my problem is that when in the parsys i attach the other component (for example dropdown).

<div class="row">

   <sly data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></sly>

</div>

 

the code result is something like this: 

 

<div class="row">

   <div class="customDropdown">   <<< this div made by parsys is braking the UI i any way to delete it?

      <div class="col-md-6 col-lg-12"> dropdown </div>

   </div>

</div>

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hi @Casal0x ,

Add cq:noDecoration property to component node with value "true" in whichever non-editable component where you don't require component wrapper div to get generated with class name(for ex: the div generated with class name 'customDropdown' for that specific component in your example). by adding this property with value "true" will avoid generating wrapper element.

 

For editable component, ideally there should not be any UI issue because of this component wrapper div element. so, add css style changes accordingly if in case there is any UI issue.

 

Note:

  • The wrapper element should be added to all components that are editable, so that the page editor can initialize and update them properly.
  • For non-editable components, the wrapper element can be avoided if it serves no particular function, so that the resulting markup is not unnecessarily bloated.

 

decoration.png 

 

<div class="row">

   <div class="customDropdown">   <!--this wrapper div element will not generated if cq:noDecoration = true property added to customDropdown component node

      <div class="col-md-6 col-lg-12"> dropdown </div>

   </div>

</div>

 

Refer this for more details:

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

 

Hope this helps!

View solution in original post

8 Replies

Avatar

Correct answer by
Level 8

Hi @Casal0x ,

Add cq:noDecoration property to component node with value "true" in whichever non-editable component where you don't require component wrapper div to get generated with class name(for ex: the div generated with class name 'customDropdown' for that specific component in your example). by adding this property with value "true" will avoid generating wrapper element.

 

For editable component, ideally there should not be any UI issue because of this component wrapper div element. so, add css style changes accordingly if in case there is any UI issue.

 

Note:

  • The wrapper element should be added to all components that are editable, so that the page editor can initialize and update them properly.
  • For non-editable components, the wrapper element can be avoided if it serves no particular function, so that the resulting markup is not unnecessarily bloated.

 

decoration.png 

 

<div class="row">

   <div class="customDropdown">   <!--this wrapper div element will not generated if cq:noDecoration = true property added to customDropdown component node

      <div class="col-md-6 col-lg-12"> dropdown </div>

   </div>

</div>

 

Refer this for more details:

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

 

Hope this helps!

Avatar

Employee Advisor
There would be one constraint with cq:decoration tag is that the this property won’t let the component editable as wrapping elements are mandatory to open a dialog in the edit mode.

Avatar

Level 8

@shelly-goel  yes correct we should cq:noDecoration = true to only for non-editable components as mentioned below.

 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/decoration-tag.h...

 

  • The wrapper element should be added to all components that are editable, so that the page editor can initialize and update them properly.
  • For non-editable components, the wrapper element can be avoided if it serves no particular function, so that the resulting markup is not unnecessarily bloated.

Avatar

Level 1
and for editable components what can be an answer :S

Avatar

Level 8

@Casal0x 

For editable component, ideally there should not be any UI issue because of this component wrapper div element. so, add css style changes accordingly if in case there is any UI issue.

Avatar

Community Advisor

you can try with jquery

 

$('div:customDropdown').<<<apply logic>>>>;</span>

Avatar

Employee

<div class="customDropdown"> is generated by Dropdown component, not the parent parsys.
Check if you can modify dropdown component markup.