Qr-code in a second page

Hello there,

I found a nice way with the QR-code for the invoice, but, my problem now is when I have some products/services the numbers go over the section of the QR-code and I was looking for a code or something that makes the QR-code in the second page of the PDF if the content is too large. (printscreen)

I saw that there’s a “pagebreak” code, but, I have no Idea how or where to put it.

Can someone help me with that?

<div class="page-break"></div>

Hello Lucaw…

but, there’s an “If” somewhere?
because, how it will know where to break the page?

Hi @cavetech

In the “Content-Section” (after the last closing div):

<div class="page-break" contenteditable="false"></div>

<div style="position: fixed; margin-top: 172mm; width: 100%;">
    $swiss_qr
</div>

This makes always a Page Break and put the SwissQR on the next page to the bottom.

In the "Includes-Section“:

    @page {
        margin-left: 0cm;
        margin-right: 0cm;
        margin-top: 2cm;
        margin-bottom: 0cm;
        size: $page_size $page_layout;
    }

    @page :first {
        /* You can only change the size, margins, orphans, widows and page breaks here */

        /* Paper size and page orientation */
        size: A4 portrait;

        /* Margin per single side of the page */
        margin-left: 0cm;
        margin-top: 0cm;
        margin-right: 0cm;
        margin-bottom: 2cm;
    }

    /* Defines a class for manual page breaks via inserted .page-break element */
    div.page-break {
        page-break-after: always;
    }
    
    #qr-bill {
        width:100% !important;
        box-sizing: border-box;
        border-collapse: collapse;
        color: #000;
    }

    #qr-bill td {
        max-width: none;
    }

This defines the SwissQR that it shows the whole page width and sets the Margin for the 1st page and all other pages.

I hope this could solve your question…

Greets

1 Like

Hello @checkitsedo ,

Thank you… yes, that helps…

I don’t really want to do the page break always, just in the case where I put a lot of content int the first page so… Something conditional… I’ll try with this…

But, thanks…

Hello @checkitsedo ,

It doesn’t work.
The QR-code appears in 2 pages, not just in the second one!.

Hi @cavetech
Sorry for the late response - I had a lot of other projects… Did you find a solution in the meanwhile?

Hi @checkitsedo , yes… it’s working.

Would be nice if you share your soluten. Thanks!

Hello @Schmitti,
I did a lot of changes… but I think is something like this.

In the “body”

<div class="page-break" contenteditable="false"></div>

<div style="position: fixed; margin-top: 152mm;width: 100%;">
    $swiss_qr
</div>

And for the CSS

 #qr-bill {
        width:100% !important;
        box-sizing: border-box;
        border-collapse: collapse;
        color: #000;
        height:100mm !important;
    }
#qr-bill-receipt{
width:32mm !important;
border-right: 0.75pt dashed black !important;
}

#qr-bill-separate-info{
border-bottom: 0.75pt dashed black !important;
color:#fff;
}
div.page-break {
        page-break-after: auto;
    }

I’m not sure is all I did, because I changed a lot to have that working… If this not work for you I can send you all the code.

And, for information, I have my QR-code on the second page, it let me more space on the first.

Obviously please do not start with “div” in CSS-style-section. Just let it be a dot to start the page-break-class-section.

Is it right that the CSS-style-IDs qr-bill and qr-bill-receipt are not in use in the body?

I guess the QR-code-section shell always be on a new page at the top, am I guessing right?

EDIT:
OK, in general your class will do it’s job. I’m on it. Just give me 5 minutes.

Do you use a default design or a customized one? It looks like you put the QR-code-section into the repeating footer. Otherwise it wouldn’t appear on every page.