'How to avoid auto page breaks when printing HTML page to PDF

I am in the process of printing a large quantity of labels, and I am running into issues regarding PDF page breaks.

A screenshot of my problem:

As you can see there is enough physical space for the lower block of labels to be moved up but it breaks to the next page.

I've been attempting to play with my margin/padding values in CSS to no avail.

My HTML and CSS snippets are attached below.

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

li {
    padding-top: 1px;
    text-align: left;
    font-size: 85%;
}

.label {
    display: flex;
    flex-direction: column;
    width: 3.752in;
    max-width: 3.752in;
    height: 1.25in;
    max-height: 1.25in;
    padding-left: 2px;
    border-radius: 6.8px;
}


.label:nth-child(12n) {
    margin-bottom: 1.75in;

}

.grid-container {
    margin-top: 0.75in;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, 3.752in);
    grid-row-gap: 0.14in;
    grid-column-gap: 0.27in;
}

.code-container {
    display: flex;
    flex-direction: row;
    vertical-align: center;
    gap: 110px;
    margin-top: 1px;
    padding-left: 4px;
    position: relative;
}

.QR {
    height: 0.4in;
    width: 0.4in;
}

.bar {
    height: 0.38in;
    width: 400px;
}


.info-list {
    margin-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    list-style: none;
    position: relative;
}

.id-num, .location {
    font-weight: bold;
}

.description {
    font-size:  70%;
    font-style: italic;
}

.location {
    position: absolute;
    top: 58px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WWC Label Render</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div class="grid-container" id="labelContainer">
        <script id="labelsTemplate" type="text-template">
            {{#labels}}
                <div class="label">
                    <div class="code-container">
                        <svg class="barcode bar"
                        jsbarcode-displayValue="false"
                        jsbarcode-width="100px"
                        jsbarcode-height="1125px"
                        jsbarcode-value="{{Control Number}}">
                        </svg>
                        <img class="QR" src="/QRCodes/QRCodePart_{{Control Number}}.png">
                    </div>
                    <ul class="info-list">
                        <li class="id-num">Part #: {{Control Number}}</li>
                        <li class="description">{{Description}}</li>
                        <li class="manufacturer-model">{{Manufacturer}}: {{Model}}</li>
                    </ul>
                </div>
            {{/labels}}
        </script>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz+x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3+NjP+bCsPYz3hn0HnBkGmkIFSr7QcEZT+KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="html2pdf.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.0/mustache.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var data = {**Data cannot be included**}
        var template = $("#labelsTemplate").html();
        $("#labelContainer").html(Mustache.to_html(template, data));
        JsBarcode(".barcode").init();
        var page1 = document.getElementById("page");
        html2pdf(page1)
    });
</script>
</html>
htmlcsspdf


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions