What?
A very quick article on how to deal with an issue where a CRM template has been used and where the table of line items appears on a separate page (and to remind me of the CSS to fix this).

Why?
By default / out-of-the-box / vanilla, in a Zoho CRM Template, the table of line items will behave like this; specifically when there are a lot of line items as per my screenshot here:
Zoho CRM: Template: Empty Space Issue

How?
This has been raised a few times by multiple clients but the fix is rather quick as long as you can get to the HTML of the template:

  1. Login to ZohoCRM > Setup > Customization > Templates > Inventory > Select the template with this issue
  2. Click on the "Edit HTML" icon in the top right of the editor:
    Zoho CRM: Template: Empty Space Issue: Edit HTML button
  3. Find the code "page-break-inside"
  4. Change this from "avoid" to "auto":
    Zoho CRM: Template: Empty Space Issue: Table break to Auto
  5. And optionally, add to the "<tr>" tag under "OrderedItems" class the code: 
     style="page-break-inside:avoid; page-break-after:auto"
    Zoho CRM: Template: Empty Space Issue: Table Row break to avoid
  6. Click on "Insert" and test!