CODEWITHSUNDEEP
javahtmlthymeleafhtml-lists
Dean Thomas
Dean Thomas

Reputation: 53

Ordered list using thymeleaf loop not connected

I'm sorry if I have to be vague as I can't really show the clients requirement.

I have a stacked ordered list, which shows details of the parent and child. Before the parent and child part, the first item and more item after the parent-child part is showing different details, but I have to put it in the same list. So what I'm trying to achieve is:

enter image description here

But what I got:

enter image description here

<ol type="a">
  <li>Coffee</li> //item without child detail

  <span class="widget-has-slot">{{the parent-child widget}}<br />
  <pre>
 &lt;li th:each="parent : ${parentChildMap}"&gt; //parent

   //parent detail

  &lt;ol&gt;                                   //child list start
   &lt;li th:each="child : ${parent.value}"&gt; //child

   //child detail

   &lt;/li&gt;                                  //child closing tag
  &lt;/ol&gt;                                  //child list end
 &lt;/li&gt;                                  //parent closing tag

<li>Water</li>  //more item without child detail
<li>Beer</li>
</ol>

I tried using counter increment, but it still showing the same result. Reference:

  1. https://travishorn.com/ordered-lists-in-html-a4621e17532b
  2. https://www.w3schools.com/cssref/pr_gen_counter-increment.php#gsc.tab=0&gsc.q=list

Currently, I'm using 3 different ol with start value. One for the first item, one for the thymeleaf part, and another one after the thymeleaf, which shows me the result I wanted, but I know this is not efficient as I will need to change the start value when the number of parent changed.

<ol type="a">     // first ol
  <li>Coffee</li> //item without child detail
</ol>

  <span class="widget-has-slot">{{the parent-child widget}}<br />
  <pre>
&lt;ol type="a" start="2"&gt;                    //second ol
 &lt;li th:each="parent : ${parentChildMap}"&gt; //parent

   //parent detail

  &lt;ol&gt;                                   //child list start
   &lt;li th:each="child : ${parent.value}"&gt; //child

   //child detail

   &lt;/li&gt;                                  //child closing tag
  &lt;/ol&gt;                                  //child list end
 &lt;/li&gt;                                  //parent closing tag
&lt;/ol&gt; 

<ol type="a" start="5">   //third ol
 <li>Water</li>  //more item without child detail
 <li>Beer</li>
</ol>

How do I get them to work without manually changing start values?

Upvotes: 0

Views: 81

Answers (1)

Metroids
Metroids

Reputation: 20487

Use th:start, and calculate the start dynamically.

<ol type="a" th:start="${2 + #lists.size(parentChildMap)}">

Upvotes: 1

Related Questions