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

[Vinit_Pillai]

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

[Manjunath_K · Accepted solution]

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>

[Vinit_Pillai]

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

[Manjunath_K]

@Vinit_Pillai 

Self closing tags should be used only with the elements which has no content. please refer below links.

https://dev.w3.org/html5/html-author/#self-closing-tag

https://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag

http://xahlee.info/js/html5_non-closing_tag.html

[Vinit_Pillai]

Thanks