How to define size of divs with thymeleaf?

Question

I have a div with a list of divs inside which carry images and videos. I need them to be all the same size (a square with the same size would be good). Cause now it's all misaligned

That's what I have tried till now:

<div class="row text-center text-lg-left">
                        <div th:each="inst, iStat : ${instances}" class="col-lg-3 col-md-4 col-6"
                            th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
                            <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" data-target="#showMedia" data-toggle="modal" th:data-slide-to="${iStat.index}"
                                    style="width: 100%;" th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}" alt="">
                            </a>
                        </div>
                    </div>

This space will support probably 5 images and that's how it looks like currently:

The middle one is a video.

I also would need something to distinguish between video and photos, how could I indicate it's a video? Is that possible to attach a "play button" in front of it?

score 1 · Answer 1 · answered Mar 19 '20 at 17:29

I think this is more of a CSS question, than a Thymeleaf question. But here is one approach which may help you.

The approach is inspired by details in this question.

The following Thymeleaf template assumes you want to display five identially-sized squares in a row, with an image (or video) in each square:

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <title>Grid Demo</title>

        <style>

            <!-- included just for reference 
            div.three {
                float: left;
                position: relative;
                width: 29%;
                padding-bottom: 29%;
                margin: 1.7%;
                border: 1px solid grey;
            }
            div.four {
                float: left;
                position: relative;
                width: 22%;
                padding-bottom: 22%;
                margin: 1%;
                border: 1px solid grey;
            }
            -->

            <!-- five squares in a horizontal row -->
            div.five {
                float: left;
                position: relative;
                width: 17%;
                padding-bottom: 17%;
                margin: 1.1%;
                border: 1px solid grey;
            }

            div.content {
                position: absolute;
                height: 80%;
                width: 90%;
                padding: 10% 5%;
            }

            div.table {
                display: table;
                height: 100%;
                width: 100%;
            }

            div.table-cell {
                display: table-cell;
                vertical-align: middle;
            }

            .content .rs {
                width: auto;
                height: auto;
                max-height: 90%;
                max-width: 100%;
            }

        </style>
    </head>

    <body>

        <div th:each="inst, iStat : ${instances}" class="five">
            <div class="content">
                <div class="table">
                    <div class="table-cell">
                        <img class="rs" th:attr="src=${inst}"/>
                    </div>
                </div>
            </div>
        </div>

    </body>

In my case, the end result looks like this, across the width of my browser screen:

Points to note:

1) If you want to dynamically display 3, 4, or 5 boxes, then you can parameterize the class="five" attribute in the Thymeleaf template. The size of the ${instances} object will tell you which class you need:

${#lists.size(instances)}

2) If you want to add video controls in a square, that would involve passing an object to Thymeleaf which contains not only the media file name, but a boolean (or similar) to indicate if the media is playable. Add such content in its own <div>, following the relevant <img> tag:

<div th:if="${isVideo}">...</div>

I hope that gives you some ideas.

How to define size of divs with thymeleaf?

1 Answers1