Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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