Search code examples
javascriptcssspring-bootthymeleafweb-frontend

Spring boot + Thymeleaf show database records in custom fragments

I have database records, which I want to show on the page in a certain way. For this reason I've created a thymeleaf fragment, which should be used as a template for all of the records in my database. Now I am not sure how to make each fragment (representing a db record) to print next to each other. Moreover, I want to achieve something like this :

enter image description here

My current implementation shows all the fetched records in the exact same spot on the webpage, which creates something like "stack" and shows only the last record. My current implementation looks like this:

enter image description here

To summarize I want to achieve something like a CardView in Android development. I've went through a lot of thymeleaf tutorials, but all of them seem to be about organising data in tables, which is not my goal. At this moment I am not sure if the targeted functionality from picture one can be achieved only with thymeleaf.

I hope someone can give me tips or advice about how I can achieve the desired result. Should I look in some JS frameworks? Or this can be achieved with thymeleaf?

My attempt to achieve this functionality have produced the following code so far.

<div th:fragment="officer">
<div class="officerWrapper" th:block th:each="officer : ${officers}">
    <div class="officerLeft">
        <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRTw8mKnjVErhmhl5S_aUZfvf86vwZOMJBqbUqM-guT-kv6K4xu&usqp=CAU"
            alt="user" width="100" height="150">
    </div>
        <div class="right">
            <p>
                Name :
                <td th:text="${officer.firstName}">
            </p>
            <p>
                Surname :
                <td th:text="${officer.lastName}">
            </p>
            <p>
                Mobile:
                <td th:text="${officer.mobile}">
            </p>
            </br>
            <p>Статут: Наличен</p>
            </br>
            <button class="button button1" name="editOfficer">Edit</button>
        </div>
</div>
</div>

And the css goes..

    *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}

.officerWrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 350px;
  height: 150px;
  display: flex;
  box-shadow: 0 10px 20px 0 rgba(69,90,100,.08);

}

.officerWrapper .officerLeft{
  width: 65%;
  background: #38584A;
  padding: ;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  text-align: center;
  color: #fff;
}

.officerWrapper .officerLeft img{

  border-radius: 0px;
  margin-bottom: 0px;
  width:100%;
  height:100%;

}

.officerWrapper .right{
  background:#38584A;
  width:100%;
  padding: 10px 10px 10px 10px;
  color:#fff;
  font-weight: bold;
}

.button1 {
  border: 2px solid #4CAF50;
}
Solution

  • You can definitely achieve this without js and with just html and css because this is a styling challenge, so all you need is the correct css.

    The reason that all your cards are stacked right now is that you're positioning every card at the exact same point in space (the middle of the screen) with these lines:

      .officerWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  ... }

    You can achieve what you want by using flexbox or css grid. Neither is better than the other so you'll have to see what works for you. I'll leave you some references to check out.

    References