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
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.
Hi,
Actually, I made a lot of changes to have the QR-code in the second page, I can’t remember all the changes I made.
But I started with a default design, the “modern” one. Then I made my changes…
If you need I can send you all the code.
Good morning,
yes, posting the code would be great. If it contains sensitive data, please censor it or consider sending me the code as a private message, but censoring would be better because so everyone can have a look on it. 
hello.
I don’t have any sensitive data on the code… so… here it is…
The files are attached…
Like I said, it’s moust of the “modern” template with the codes for the QR-code in second page.
footer.txt (1.1 KB)
head.txt (549 Bytes)
body.txt (2.2 KB)
css_invoice.txt (10.3 KB)
I hope it helps!
Hi,
the “position: fixed” irritates me. I would delete that.
Here’s the code I use. It contains twig-code to show the QR-code only if there’s something to be payed left about the invoice:
For the body:
<ninja>
{% if invoices %}
{% set invoice = invoices|first %}
{% if invoice.amount != invoice.paid_to_date %}
<div class="pqrcode-grid">
<div id="pqrcode-svg">$sepa_qr_code</div>
<div class="pqrcode-text">
<div id="pqrcode-head">
Einfache Überweisung mittels GiroCode
</div>
Erledigen Sie Ihre Bankgeschäfte mit dem Smartphone? Dann scannen Sie einfach den abgebildeten QR-Code mit Ihrer Mobile-Banking-App. Es werden sämtliche für die Überweisung benötigten Daten automatisch übernommen.
</div>
</div>
{% endif %}
{% endif %}
</ninja>
For the CSS:
/* QR-CODE / GIROCODE */
#pqrcode-block {
display: block;
}
.pqrcode-grid {
display: grid;
align-items: center;
gap: 5px;
grid-template-areas: "a b";
margin-left: -6px; /* Etwas nach links; ist hübscher */
}
#pqrcode-svg {
text-align: right;
}
#pqrcode-svg svg {
width: 80px;
height: auto;
}
#pqrcode-head {
text-align: left;
font-weight: bold;
font-size: 11pt;
}
.pqrcode-text {
padding-left: 3px;
font-size: 10pt;
line-height: 1.3;
}
In my configuration this code is put into a non-page-breakable “block” with the totals-section of the invoice, so the customer always see the option to pay by QR-code when he looks out for the price-sum. Actually the code herefor looks like this:
Body:
<div class="no-page-break">
<div id="table-totals" cellspacing="0">$status_logo</div>
<ninja>
{% if invoices %}
{% set invoice = invoices|first %}
{% if invoice.amount != invoice.paid_to_date %}
<div class="pqrcode-grid">
<div id="pqrcode-svg">$sepa_qr_code</div>
<div class="pqrcode-text">
<div id="pqrcode-head">
Einfache Überweisung mittels GiroCode
</div>
Erledigen Sie Ihre Bankgeschäfte mit dem Smartphone? Dann scannen Sie einfach den abgebildeten QR-Code mit Ihrer Mobile-Banking-App. Es werden sämtliche für die Überweisung benötigten Daten automatisch übernommen.
</div>
</div>
{% endif %}
{% endif %}
</ninja>
</div>
The necessary additional CSS-code (without format-code for the table-totals-section):
.no-page-break {
page-break-inside: avoid;
}
/** Öffentliche Notizen ausblenden, da wir sie bei Bedarf unten einfügen **/
[data-ref="total_table-public_notes"] {
display: none;
}
I do not display the public-notes within the table-totals-section for a better look. So my invoices look like this (I deleted the part with the hint to my general contract-conditions out of the code above!):
@cavetech, did my last reply help you?
i there.
Actually, mine is working fine with the code I sent to you.
I thought that you needed help with yours.
