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

Solved

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

Forum|Forum|5 years ago
December 7, 2020
1 reply
2226 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Manjunath_K

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>

Manjunath_KAccepted 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_PillaiAuthor

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