I'm struggling with displaying database records on a webpage in a specific format. To achieve this, I've created a thymeleaf fragment to act as a template for each record in my database. However, I can't figure out how to make these fragments display next to each other like cards. I want the layout to resemble something like this:
https://i.sstatic.net/Bg3o8.jpg
Currently, all the fetched records appear in the same spot on the webpage, creating a "stack" effect and only showing the last record. The current implementation looks like this:
https://i.sstatic.net/JqUPk.png
I'm aiming for a CardView-like display, similar to Android development. While I've explored numerous thymeleaf tutorials, most focus on organizing data in tables, which is not what I'm looking for. I'm unsure if the desired functionality from the first picture can be achieved using only thymeleaf.
I'm seeking advice on how to achieve this result. Should I consider using JS frameworks, or is thymeleaf sufficient? Here's the code I've come up with 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>Status: Available</p>
</br>
<button class="button button1" name="editOfficer">Edit</button>
</div>
</div>
</div>
And the CSS goes as follows:
*{
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;
}