Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

divs becoming nested in the output from HTL

Avatar

Level 2

I have created a component which is invoked as below:

<div class="hptout dtbreak" id="perfectFit" style="position: relative;">

                    <sly data-sly-resource="${'carousapart1' @ resourceType='wcm/foundation/components/parsys'}"/>

                    <sly data-sly-resource="${'carousapart2' @ resourceType='wcm/foundation/components/parsys'}"/>

                    <sly data-sly-resource="${'carousapart3' @ resourceType='wcm/foundation/components/parsys'}"/>

</div>

The component code is

<sly data-sly-use.carousalParts="com.demo.myapp.models.CarousalParts">

    <sly data-sly-test="${carousalParts.partNum == '1'}">

        <div class="flexbox row center align-stretch someSome">

            <sly data-sly-include="parts.html"/>

        </div>

    </sly>

    <sly data-sly-test="${carousalParts.partNum == '2'}">

        <div class="flexbox row center align-stretch someSome2" style="position: absolute;z-index: 2;top: 0;width: 100%;">

            <sly data-sly-include="parts.html"/>

        </div>

    </sly>

    <sly data-sly-test="${carousalParts.partNum == '3'}">

        <div class="flexbox row center align-stretch someSome3" style="position: absolute;z-index: 1;top:0;width: 100%;">

            <sly data-sly-include="parts.html"/>

        </div>

    </sly>

</sly>

However when the 3 instances of the component are executed and rendered on the page, the output comes as nested one inside the other in the final HTML of the page. The divs need to be siblings and instead end up in a parent-child relationshop thus breaking the page. I am trying to understand what could be wrong with the above sightly code and any help would be appreciated.

3 Replies

Avatar

Level 10

Is this a question for the AEM forums? If so, please let me know and I'll move it to the AEM community.

Avatar

Level 2

This is a question for AEM forums. However the issue got resolved.

Regards

Avatar

Level 10

Thanks for confirming. We'd appreciate if you'd share your solution in case others have this same problem. I'll move this post the the AEM community as well.