filemonczyk filemonczyk - 1 month ago 6
HTML Question

Html with thymeleaf list

I have code like this:

<ul th:each="pet : ${petCollection}">
<li class="list-group-item" >Dapibus ac facilisis in
<button class="badge" onclick="window.location.href='/'">Continue</button>
<button type="submit" class="badge">Info</button>
</li>
</ul>


its displays like this:

enter image description here

but I dont want static content inside my list so im adding this:

<ul th:each="pet : ${petCollection}">
<li class="list-group-item" th:text="${pet.petName}">Dapibus ac facilisis in
<button class="badge" onclick="window.location.href='/'">Continue</button>
<button type="submit" class="badge">Info</button>
</li>
</ul>


but then Im getting this:

enter image description here

long story short, the buttons are missing, any idea guys how I could solve it?

Answer

When you add th:text to an element, it replaces the entire contents of that element -- in your case, this is overwriting the <button /> tags with the pet name. To fix this, you want to put the th:text in another tag of it's own, so that the rest of the tags aren't affected. Something like this:

<ul  th:each="pet : ${petCollection}">
  <li class="list-group-item">
    <span th:text="${pet.petName}">Dapibus ac facilisis in</span>
    <button class="badge" onclick="window.location.href='/'">Continue</button>
    <button type="submit" class="badge">Info</button>
  </li>
</ul>