Closing div element inside sly element.

Avatar

Avatar
Validate 1
Level 1
pranalim1653274
Level 1

Likes

0 likes

Total Posts

8 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
pranalim1653274
Level 1

Likes

0 likes

Total Posts

8 posts

Correct reply

0 solutions
Top badges earned
Validate 1
View profile
pranalim1653274
Level 1

16-07-2020

Hi, 

I have requirement of below script.

<div class="${object.ColumnContainerClass}">
<sly data-sly-list="${object.ColumnSubContainerClass}" >
   <div class="${item @CONTEXT='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

 

 

 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

16-07-2020

Hi @pranalim1653274 

 

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.

 

 

 

Answers (1)

Answers (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,326 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,326 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

16-07-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