How to put the Terms and Conditions on a separate page of the pdf?

I recently migrated from V4 to V5 (hosted), but my settings did not migrate so well. My invoices now show the T&Cs just below the products/services and total/subtotal columns, whereas I would like them to appear on a separate page.

With V4, I was able to solve the issue by adding this piece of code through the Settings / Customize design page of the hosted app:

{
“pageBreak”: “after”,
“columns”: [
{

This does not work anymore, or is not possible.

Any idea on how to resolve the above when using Hosted V5?

Thank you.

Hi,

@david can you please advise?

I found this answer which seems to work: css - Google Chrome Printing Page Breaks - Stack Overflow

You’d want to add this code on the includes tab:

      div.page
      {
        page-break-after: always;
        page-break-inside: avoid;
      }

And then use the page class to force a break:

    <div class="page">
      <h1>This is Page 1</h1>
    </div>
    <div class="page">
      <h1>This is Page 2</h1>
    </div>
    <div class="page">
      <h1>This is Page 3</h1>
    </div>

Many thanks.

I must admit this goes beyond my programming skills…

Below is a copy of my includes tab. Would you mind at all showing me where, exactly, I ought to add the additional code?

Much appreciated.

<style id="style">
    @import url($font_url);

    :root {
        --primary-color: $primary_color;
        --secondary-color: $secondary_color;
        --line-height: 1.6;
    }

    html {
        width: 210mm;
        height: 200mm;     
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: $font_name, Helvetica, sans-serif;
        font-size: "$font_size";
        zoom: 80%;
    }

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


    p {
        margin: 0;
        padding: 0;
    }

    .header-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    .company-logo {
        max-width: 40%;
    }

    #company-details {
        display: flex;
        flex-direction: column;
        line-height: var(--line-height);
    }

    #company-details > p:first-child {
        color: var(--primary-color);
    }

    #company-address {
        display: flex;
        flex-direction: column;
        line-height: var(--line-height);
    }

    .entity-label {
        margin-top: 2.5rem;
        text-transform: uppercase;
        padding-left: 1rem;
        margin-bottom: 1rem;
        font-weight: bold;
        color: var(--primary-color);
    }

    .client-and-entity-wrapper {
        display: flex;
        padding: 1rem;
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
    }

    #entity-details {
        text-align: left;
        margin-right: 20px;
    }

    #entity-details > tr,
    #entity-details th {
        font-weight: normal;
        padding-right: 15px;
        padding-top: 2.5px;
        padding-bottom: 2.5px;
    }

    #client-details {
        display: flex;
        flex-direction: column;
        line-height: var(--line-height);
    }

    #client-details > :first-child {
        font-weight: bold;
    }

    [data-ref="table"] {
        margin-top: 1rem;
        margin-bottom: 50px;
        min-width: 100%;
        table-layout: fixed;
        overflow-wrap: break-word;
    }

    .task-time-details {
        display: block;
        margin-top: 5px;
        color: grey;
    }

    [data-ref="table"] > thead {
        text-align: left;
    }

    [data-ref="table"] > thead > tr > th {
        font-size: 1.1rem;
        padding-bottom: 1.5rem;
        padding-left: 1rem;
    }

    [data-ref="table"] > tbody > tr > td {
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
        padding: 1rem 1rem;
    }

    [data-ref="table"] > tbody > tr > td:first-child {
        color: var(--primary-color);
    }

    [data-ref="table"] > thead > tr > th:last-child,
    [data-ref="table"] > tbody > tr > td:last-child {
        text-align: right;
    }

    [data-ref="table"] > thead > tr > th:last-child {
        padding-right: 1rem;
    }

    [data-ref="table"] > tbody > tr:nth-child(odd) {
        background-color: #f5f5f5;
    }

    #table-totals {
        margin-top: 0rem;
        display: grid;
        grid-template-columns: 2fr 1fr;
        padding-top: .5rem;
        padding-right: 1rem;
        gap: 80px;
        page-break-inside:auto;
        overflow: visible !important;
    }

    #table-totals .totals-table-right-side > * {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #table-totals>.totals-table-right-side>*> :nth-child(1) {
        text-align: $dir_text_align;
        margin-top: .75rem;
    }

    #table-totals>.totals-table-right-side>*> :nth-child(2) {
        text-align: right;
    }

    #table-totals>.totals-table-right-side> * > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
    }

    #table-totals
    > *
    [data-element='product-table-balance-due-label'],
    #table-totals
    > *
    [data-element='product-table-balance-due'] {
        font-weight: bold;
    }

    #table-totals
    > *
    [data-element='product-table-balance-due'] {
        color: var(--primary-color);
    }

    #table-totals > * > :last-child {
        text-align: right;
        padding-right: 1rem;
    }

    #footer {
        margin-top: 14px;
       text-align: center;
       margin-bottom: 0;
    }

    /** Markdown-specific styles. **/
    #product-table h3,
    #task-table h3,
    #delivery-note-table h3 {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .company-logo-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    [data-ref="statement-totals"] {
        margin-top: 1rem;
        text-align: right;
        margin-right: .75rem;
    }
    
    [data-ref*=".line_total-td"] {
        white-space: nowrap;
    }

    /** .repeating-header,
    .repeating-header-space, **/
    .repeating-footer,
    .repeating-footer-space {
        height: 10px;
    }
    .repeating-header {
        position: fixed;
        top: 0;
    }
    .repeating-footer {
        position: fixed;
        bottom: 1;
    }

    [data-element='product_table-product.description-td'], td {
        min-width:100%;
        max-width: 300px;
        overflow-wrap: break-word; 
    }
    
</style>

You’d want to add the code after the opening style tag

Just to follow on,

after you have made the page break, just use the variable $terms and the terms will be injected.

Many thanks.

I tried all this, but it won’t work regrettably.

The variable $terms is built within the invoice’s “totals-table” code, which makes it impossible to split Terms, through a page break, from the rest of the table that shows the invoice’s total. As a result, the T&Cs are displayed as a column, on the page’s left-hand-side, which does not look right. Here is a screen capture:

I should perhaps consider not adding my T&Cs at all on my invoices, or having these sent to my clients as a separate attachment.

Previously, when using V4 (hosted), I was able to split the T&Cs from the remainder of the invoice. Below is an ectract of the code I used at the time.

I used " “pageBreak”: “after”,
“columns”:

and instered “$notesAndTerms” further down.

  {
    "style": "invoiceLineItemsTable",
    "table": {
      "headerRows": 1,
      "widths": [
        "55%",
        "15%",
        "15%",
        "15%"
      ],
      "body": "$invoiceLineItems"
    },
    "layout": {
      "hLineWidth": "$notFirst:.5",
      "vLineWidth": "$none",
      "hLineColor": "#D8D8D8",
      "paddingLeft": "$amount:8",
      "paddingRight": "$amount:8",
      "paddingTop": "$amount:14",
      "paddingBottom": "$amount:14"
    }
  },
  {
    "columns": [],
    "margin": [
      40,
      -20,
      40,
      10
    ]
  },
  {
    "pageBreak": "after",
    "columns": [
      {
        "table": {
          "widths": [
            "*",
            "40%"
          ],
          "body": "$subtotals"
        },
        "layout": {
          "hLineWidth": "$none",
          "vLineWidth": "$none",
          "paddingLeft": "$amount:34",
          "paddingRight": "$amount:8",
          "paddingTop": "$amount:6",
          "paddingBottom": "$amount:4"
        }
      }
    ]
  },
  "$notesAndTerms",
  "$signature",
  {
    "stack": [
      "$invoiceDocuments"
    ],
    "style": "invoiceDocuments"
  }
]

which resulted in the Terms being on a separate page, as shown on this screen capture.

@Zeidroc Have you found a solution? I’m having the same issue

I haven’t solved the issue so far, so am stuck with invoices which display my T&Cs in a column on the first page’s left-hand side. That’s messy and does not look much professional.

It was easy to fix with V4 and I hope someone will come around with a solution for V5 too!

Hi,

I am afraid that none of the suggestions I was kindly given actually work.

So, I’ve given up trying to put my T&Cs on a separate page and have now reverted back to V4!

That’s too bad, I’m not sure why this solution above isn’t working for you. If you want to share your v5 design we can review it for you.