Extra div getting added in sightly html markup in if-else condition | Community
Skip to main content
cqsapientu69896
cqsapientu69896
New Participant
May 1, 2017
Solved

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

  • May 1, 2017
  • 3 replies
  • 3328 views

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

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 cqsapientu69896

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-else-condition

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.

3 replies

cqsapientu69896
cqsapientu69896AuthorAccepted solution
New Participant
May 2, 2017

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-else-condition

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.

Nupur_Jain
Nupur_Jain
Employee
May 1, 2017

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

Feike_Visser1
Feike_Visser1
Employee
May 1, 2017

Sightly/HTL tries to render valid markup as output.

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

Terms & ConditionsAccessibility statement

Loading footer...