Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
SOLVED

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

Avatar

Level 4
<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?

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hi @Vinit_Pillai ,

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>

View solution in original post

4 Replies

Avatar

Correct answer by
Level 8

Hi @Vinit_Pillai ,

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>

Avatar

Level 4
Thanks a lot. But why. Can you please explain why this worked

Avatar

Level 8

Avatar

Level 4
Thanks