Thymeleaf and ITextRenderer to convert HTML to PDF

Question

I'm working with Thymeleaf as template engine with Spring and Java to create a custom pdf.

What is the problem: when I convert an HTML page to PDF using Thymeleaf + ITextRenderer I get a totally different result

Example of the problem:

This is the HTML of the above screenshot:

                <div class="icon-container">
                    <div class="icon selectedCheckbox">
                        <label>&nbsp;</label>
                    </div>

                    <span style="white-space: nowrap; display: table-cell;height: 20px;">tes test test test</span>

                    <div class="icon badge">
                        <label>&nbsp;</label>
                    </div>
                </div>

And here is the CSS of the above screenshot:

.icon-container {
    width: 20px;
    height: 30px;
    margin-right: 4px;
    place-content: center flex-start;
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
}

.icon-container .icon.selectedCheckbox {
    margin-left: 10px;
    width: 100%;
    height: 100%;
    background-image: url(../img/selectedCheckbox.PNG);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 25px;
    vertical-align: middle;
}

.icon-container .icon.badge {
    width: 100%;
    background-image: url(../img/ic-badge.png);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 0 0;
    padding-left: 25px;
    vertical-align: middle;
    margin-left: 10px;
    height: 35px;
}

How can I be sure that what I see on the rendered HTML page is the same thing as the rendered PDF?

Answer 1

After you created your mypage.html on Chrome, for example, pres Ctrl + P, so you can see the print mode of your .html as a PDF file.