Quote Custom template break page

fgoverna
Member

Hi

I would like to insert a break page in a custom template.
With the red arrow I show the point.
So that when I generate the pdf of the quote, the Comments table starts on a new page.
And yes the table above has a dynamic height.
Thanks
Fbreakf.jpg

7 Replies 7
dennisedson
Community Manager

Hi @fgoverna 

Bringing @amandaulm into this conversation to see if she can lend a hand!

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
amandaulm
Contributor

Thanks @dennisedson 

 

Hi @fgoverna - This isn't something I've personally worked with in our quote templates, but I think something like this should work, as the quote is just a webpage:  https://www.w3schools.com/cssref/pr_print_pageba.asp

 

I'd be interested to hear how it goes, if you do try it!

fgoverna
Member

Hi @amandaulm ,

Thanks for your suggestion!

I add this 2 in my quote template

In the header:

<style>
@media print {
   #break-page {page-break-after: always;}
}
</style>


After my table:

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

 

But the PDF generated is the same 😞

F

CSarzana
Participant | Diamond Partner


Hi @fgoverna, I just try to do the same and it seems that this style works only with elements and not with class.
I use for example "div {break-inside: avoid}" to avoid to have div splitted in pages and it works correctly.
Just try to wrap your divs inside a section and use: section {page-break-after: always}

MObry
Participant

Hi @CSarzana  i'm stuck like @fgoverna .. I've tried to wrap my divs inside a section and use section {page-break-after: always} like you said  but nothing works still.. when i do it with <p> balise it's working but it's a mess.. how did you do to make it work correcly  ?

0 Upvotes
MObry
Participant

Does someone have a solution ? Is that worked for you @fgoverna  ?

0 Upvotes
MObry
Participant

Hi there,

Just so you know i solved that problem, the idea was to :

 

-First, to add in the CSS page of your theme:

 

@media print {
div.pagebreak{
page-break-after: always;
}

}

 

Secondly, to call your class in your HTML page  : (including your div ) into a section !

 

<section aria-label="line-items">

<div class="pagebreak"></div>

{% module "line_items_table_modern" path="../modules/line_items_table_modern_11K" %}
</section>

 

Hoping that could helps someone