Closing div element inside sly element. | Community
Skip to main content
P
pmahiske19
Level 2
July 16, 2020
Solved

Closing div element inside sly element.

  • July 16, 2020
  • 2 replies
  • 1640 views

Hi, 

I have requirement of below script.

<div class="${object.ColumnContainerClass}">
<sly data-sly-list="${object.ColumnSubContainerClass}" >
   <div class="${item @2941342='text'}">
</sly>

Random code ...........

 

<sly data-sly-list="${object.ColumnSubContainerClass}">
   </div>
</sly>

</div>

 

but I am unable to get the </div> class inside sly.  even if ColumnSubContainerClass is empty div renders on the page. Please help.

 

Thanks in Advance

 

 

 

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 Nupur_Jain

Hi @pmahiske19 

 

Looks like you want outer div only if the object.ColumnSubContainerClass is not empty. you can achieve it using using data-sly-unwrap but you have to use it only if you want to print inner "Random code" even if the ColumnSubContainerClass is empty.

 

 

The Empty div is printing when object.ColumnSubContainerClass is empty because data-sly-list iterates once even if the value is empty. If you want to avoid it. check its value first using data-sly-test like

 

 

<div class="${object.ColumnContainerClass}">
<sly data-sly-test="${object.ColumnSubContainerClass}" data-sly-list="${object.ColumnSubContainerClass}" >
   <div class="${item @CONTEXT='text'}">

       Random code ...........

   </div>

</sly>

</div>

 

Try this out. Let me also know if your usecase is different.

 

Hope it helps!

Nupur.

 

 

 

2 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
July 16, 2020

Hi, 
What is your requirement, do you need to add all the classes to one div or need to generate multiple divs based on the list item.

Can you please share HTL and HTML example

Arun Patidar
    P
    pmahiske19Author
    Level 2
    July 16, 2020
    yes so ColumnSubContainerClass will be multiple classes list of strings and we need to close the similar div's at the end.
    Nupur_Jain
    Adobe Employee
    Nupur_JainAdobe EmployeeAccepted solution
    Adobe Employee
    July 17, 2020

    Hi @pmahiske19 

     

    Looks like you want outer div only if the object.ColumnSubContainerClass is not empty. you can achieve it using using data-sly-unwrap but you have to use it only if you want to print inner "Random code" even if the ColumnSubContainerClass is empty.

     

     

    The Empty div is printing when object.ColumnSubContainerClass is empty because data-sly-list iterates once even if the value is empty. If you want to avoid it. check its value first using data-sly-test like

     

     

    <div class="${object.ColumnContainerClass}">
    <sly data-sly-test="${object.ColumnSubContainerClass}" data-sly-list="${object.ColumnSubContainerClass}" >
       <div class="${item @CONTEXT='text'}">

           Random code ...........

       </div>

    </sly>

    </div>

     

    Try this out. Let me also know if your usecase is different.

     

    Hope it helps!

    Nupur.

     

     

     

      Terms & ConditionsAccessibility statement

      Loading footer...