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

[cqsapientu69896]

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 <!--extra div--> 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.

Thanks

[Feike_Visser1]

Sightly/HTL tries to render valid markup as output.

You can use data-sly-test inside the divs, no must to use sly-elements.

[Nupur_Jain]

Hi,

It seems that you are placing closing div </div> in wrong place, here in your code :

<!--/* 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> <!--incorrect-->
                </sly>

just change your code to 

<!--/* 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"></div>
                    </sly>
                    <sly data-sly-test="${!condition1}">
                    <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id2"></div>
                    </sly>
                </sly>

No extra </div> would be created. Change it for third condition as well.

Hope this helps!

Nupur

[cqsapientu69896 · Accepted solution]

This was solved by adding the sightly conditions using data-sly tag instead of sly tag

http://stackoverflow.com/questions/43716591/extra-div-getting-added-in-sightly-html-markup-in-if-els...

posting the answer here for all's benefit --

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>

However; still don't understand why the extra div got added. And if data-sly-test tag solved the issue; why to use the <sly> tag? It was told that with the use of  <sly> tag; there is no need to use data-sly-unwrap tag. That's why I used <sly> tag.