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

Avatar

Avatar

pillaivinit

Avatar

pillaivinit

pillaivinit

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

Manjunath_K

MVP

Avatar

Manjunath_K

MVP

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)