CODEWITHSUNDEEP
htmlaemtemplatingsightly
cqsapientuser
cqsapientuser

Reputation: 65

Extra div getting added in sightly html markup in if-else condition

An extra div gets added in sightly if else html markup; when the the second block is not executed. There are three conditions based on checkbox in author dialog. When the second checkbox is not checked; then first and third condition are true and second condition is false; so the second sightly block should not get executed. But it adds an extra div in the markup ; so that the div with class "container tabs-container" gets closed in between.

-- please find below the sightly markup

<sly data-sly-test.condition1="${properties.checkbox1}">
<sly data-sly-test.condition2="${properties.checkbox2}">
<sly data-sly-test.condition3="${properties.checkbox3}">

<div class="tabs-body">
            <div class="container tabs-container">

                <!--/* First condition */-->
                <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>
                </sly>                

                <!--/* Second condition */-->
                <sly data-sly-test="${condition2}">
                    <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    <sly data-sly-test="${!condition1}">
                    <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    </div>
                </sly>

                <!--/* Third condition */-->
                <sly data-sly-test="${condition3}">
                    <sly data-sly-test.condition2andcondition1false="${!condition2 && !condition1}">
                        <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    <sly data-sly-test="${!condition2andcondition1false}">
                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    </div>
                </sly>


            </div> 
        </div>

The markup rendered is --

<div class="tabs-body">
            <div class="container tabs-container">


                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>


                </div><!--extra div-->





                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">

                    </div>


            </div> 
        </div>

The extra div has been mentioned with comment. I have spent much time on it but can't figure out from where the extra div is getting added. Could you sightly experts please help me out with this?

Appreciate it.

Upvotes: 0

Views: 1695

Answers (1)

rakhi4110
rakhi4110

Reputation: 9281

This is most probably due to invalid nesting of the tags. Do not try to convert JSTL code as is to HTL.

<div class="tabs-body">
    <div class="container tabs-container">

        <!--/* First condition */-->
        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1" 
            data-sly-test.condition1="${properties.checkbox1}">

        </div>

        <!--/* Second condition */-->
        <div class="tabs-body-item ${ condition1 ? '' : 'is-active' }" 
            data-tab-content-id="data-tab-content-id2" 
            data-sly-test.condition2="${properties.checkbox2}">

        </div>

        <!--/* Third condition */-->
        <div class="tabs-body-item ${condition1 && condition2 ? 'is-active' : ''}" 
            data-tab-content-id="data-tab-content-id3" 
            data-sly-test="${properties.checkbox3}">

        </div>

    </div> 
</div>

Upvotes: 1

Related Questions