Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

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

Avatar

Avatar
Validate 1
Level 1
Casal0x
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
Casal0x
Level 1

Likes

0 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
Casal0x
Level 1

01-12-2020

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>

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

139 likes

Total Posts

188 posts

Correct Reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

139 likes

Total Posts

188 posts

Correct Reply

61 solutions
Top badges earned
Give Back 3
Give Back
Boost 50
Boost 5
Boost 3
View profile
Manjunath_K
MVP

01-12-2020

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!

Answers (3)

Answers (3)

Avatar

Avatar
Give Back
Employee
Mariia_Lukianet
Employee

Likes

15 likes

Total Posts

11 posts

Correct Reply

2 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Give Back
Employee
Mariia_Lukianet
Employee

Likes

15 likes

Total Posts

11 posts

Correct Reply

2 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 10
Boost 1
View profile
Mariia_Lukianet
Employee

01-12-2020

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

Avatar

Avatar
Ignite 1
MVP
SureshDhulipudi
MVP

Likes

163 likes

Total Posts

174 posts

Correct Reply

49 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile

Avatar
Ignite 1
MVP
SureshDhulipudi
MVP

Likes

163 likes

Total Posts

174 posts

Correct Reply

49 solutions
Top badges earned
Ignite 1
Give Back 5
Give Back 3
Give Back 10
Give Back
View profile
SureshDhulipudi
MVP

01-12-2020

you can try with jquery

 

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

Avatar

Avatar
Give Back 10
MVP
shelly-goel
MVP

Likes

183 likes

Total Posts

343 posts

Correct Reply

88 solutions
Top badges earned
Give Back 10
Validate 1
Shape 1
Ignite 1
Give Back 5
View profile

Avatar
Give Back 10
MVP
shelly-goel
MVP

Likes

183 likes

Total Posts

343 posts

Correct Reply

88 solutions
Top badges earned
Give Back 10
Validate 1
Shape 1
Ignite 1
Give Back 5
View profile
shelly-goel
MVP

01-12-2020