Zoho Creator: Record Template Page Breaks
Record Templates are a great way to display your data in a stylish, printable format, but Zoho Creator lacks some of styling options one would expect. One of these missing options is the page break. We can get around this limitation by using some simple CSS magic.
When you are ready to add you page breaks to your record template, add a new, blank paragraph element where you would like to include a page break. Next, with the paragraph element selected, click the Edit as HTML option in the top panel.
Lastly, replace all of the existing HTML with the following HTML code to add a page break.
<div style="page-break-before: always;"> </div>This HTML code with included CSS adds a blank <div> container with a page break right before the container. It’s important to include the line break between the <div> tags so that you can select the container in the template editor later on.
As pointed out by a user in the comments, you can alternatively include the “page-break-inside: avoid” CSS property within your existing template elements or sections to avoid a page break in the middle of the content. In some cases this may be preferred over always display a page break regardless of the length of the content.
You can use the above method to add additional CSS styling throughout your record template in other creative ways. Let me know in the comments if you’ve used this method for adding CSS for any other creative purposes.
8 Comments
Fred · June 14, 2020 at 4:18 pm
How can I add the necessary css to the Zoho Creator template?
James Hess · June 14, 2020 at 4:53 pm
Since we don’t have access to style sheets in Zoho Creator, we need to use inline CSS in the HTML tags. That’s the style=”page-break-before: always;” part of the DIV html tag we’re adding. To modify the HTML and inline CSS, first select a blank paragraph element and click the Edit with HTML button as described in this post.
Fred · June 17, 2020 at 10:53 am
Thank you James, the code works fine printing a record using the template but doesn’t work when creating a PDF using the template.
Is there any way of adding page breaks to PDF output?
James Hess · June 17, 2020 at 4:50 pm
I “Print to PDF” in my application and it works without issue. How are you creating your a PDF in your application? Also, I would verify the div html tag you added with the styling was saved properly and not overwritten by Creator.
Fred · June 18, 2020 at 11:33 am
James,
Thanks for the feedback. I will also use the Print to PDF as it recognises the page break code in the paragraph. I don’t suppose that the page-break-inside: avoid works inside the HTML for a Zoho table element?
It’s unfortunate that the page break tip above doesn’t work in a Zoho workflow send email with template contents
Fred · June 18, 2020 at 2:40 pm
Hi James,
Have redone and retested my template within the workflow email function and it now performs page break in PDF output.
Also, I have been able to insert a page-break-inside: avoid into a Zoho table element in the template and it works!
Thanks for your invaluable help
James Hess · June 18, 2020 at 4:21 pm
Glad you were able to get it worked out! I will update this post with “page-break-inside: avoid” as an alternative CSS solution as it may be preferable in some cases.
Fred · June 18, 2020 at 9:09 pm
The problem I had with a page break within a PDF file created by a workflow send email might not have been cured but my redoing my template (didn’t alter anything) but may have been sorted by Zoho support.
I had reported the problem to them and today received a email from them saying that they had found a problem “at their end” and have corrected it.
Comments are closed.