Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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