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

Using parsys in sightly for custom column control component results divs forming one inside another when published

Avatar

Avatar
Validate 10
Level 1
pillaivinit
Level 1

Likes

0 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Applaud 5
Affirm 1
View profile

Avatar
Validate 10
Level 1
pillaivinit
Level 1

Likes

0 likes

Total Posts

30 posts

Correct Reply

1 solution
Top badges earned
Validate 10
Validate 1
Applaud 5
Affirm 1
View profile
pillaivinit
Level 1

06-12-2020

<div class="container" >
<div class="row text-center" data-sly-list.column="${columnControl.columnGridSizeList}">
<div class="col-md-${column}">
<div data-sly-resource="${ columnList.index @resourceType='wcm/foundation/components/parsys'}"/>
</div>
</div>
</div>

In the above code, the list contains {3,3,3,3} so that 4 col-md-3 divs form. This works in edit mode all the divs are formed in the same level. But when add text component to these 4 parsys and write something, in published Mode the divs form one inside another.  I'm using AEM 6.3 . Can anyone help?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Give Back 3
MVP
Manjunath_K
MVP

Likes

140 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

140 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

06-12-2020

Hi @pillaivinit ,

Replace self closing tag for parsys div element with container tags as mentioned below, hope this will resolve the issue which you are facing.

 

<div class="container" >
   <div class="row text-center" data-sly-list.column="${columnControl.columnGridSizeList}">
       <div class="col-md-${column}">
            <div data-sly-resource="${ columnList.index @resourceType='wcm/foundation/components/parsys'}"><div>
      </div>
   </div>
</div>

Answers (0)