CODEWITHSUNDEEP
htmlthymeleaf
filemonczyk
filemonczyk

Reputation: 1703

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?

Upvotes: 1

Views: 3422

Answers (1)

Metroids
Metroids

Reputation: 20487

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>

Upvotes: 3

Related Questions