This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Problems with page breaks

jfairfull wrote on 2013-10-21:
I'm trying to use Pdfcrowd in a label application that I developed. I have been using it with a template I created that has 5 labels per page and everything seemed to work fine, but now I'm trying to create a template for 6 labels to a page and I'm having all kinds of problems. The template I'm using is this:

https://simplicitylabels.com/6up.php

The API call for this is:

$client->setPageWidth('11in');
$client->setPageHeight('8.5in');
$client->setPageMargins('.24in', '.618in', '.24in', '.637in');
$client->usePrintMedia(true);
$client->setInitialPdfZoomType(3);
$client->useSSL(true);
$pdf = $client->convertURI('https://simplicitylabels.com/6up.php');

The problem I'm having is that I get something like the attached where it doesn't quite line up between pages. If you scroll between pages you'll notice that the labels don't line up perfectly with respect to their vertical position on the page. I'm trying to just make the page break and line up at the margin, but it doesn't seem to want to do that and I can't figure out why.
support wrote on 2013-10-21:
Hello,

Your HTML widht is 1075 pixels which is 1075/96=11.2 inches. The height of the labels is 886 pixels which is 886/96=9.2 inches. The PDF page size is 11in by 8.5in. If we count in the margins, the printable area is reduced to 9.75in by 8in. This means that our software has to scale down your 11.2in by 9.2in HTML to fit the PDF printable area. The side effect of this operation is that the labels may not line up sometimes.

I would recommend that you adjust the label size so that they fit the PDF printable area.

Tip: To force a page break you can add the following to your style sheet:
.break { clear:both; page-break-after:always; }
jfairfull wrote on 2013-10-21:
Yeah, I had been adjusting the labels all along. It was the clear that was the problem. I didn't realize that it wouldn't do the page break without a clear. Thanks for your help.
lemon wrote on 2014-01-12:
Hi,

I am a new user of PDF converter API , I am having trouble in page break.

On this http://www.wscraper.com/work/test.pdf sample what I wanted is, 1st page and "Presence Status" section will be in one page then break the page.

How to set custom page break ? There are also some bad page breaks in this PDF.

I appreciate your help with proper example and ref.

--
Kind Regards
support wrote on 2014-01-13:
Hello,

You can force a page break with the "page-break-after:always" CSS property:
<div>Page 1</div>
<div style="page-break-after:always"></div>
<div>Page 2</div>
...


You can avoid page breaks inside an element using the "page-break-inside:avoid" CSS property. For example to avoid page breaks in table cells you can use the following:
td, th { page-break-inside: avoid; }
cbubny wrote on 2020-11-06:
I've tried using <div style="page-break-after:always"></div>. and a class .break {clear:both; page-break-after:always;} multiple times and nothing is working. Any other suggestions?
support wrote on 2020-11-09:
Hi,

Please send us a sample HTML document that demonstrates the problem to support@pdfcrowd.com and we will look into it. Thanks.
cbubny wrote on 2020-11-09:
Sent, thank you!
support wrote on 2020-11-09:
Thanks we got it.

The answer may help other users too.

Page breaks are sometimes in a conflict with CSS display flex. Remove flex from your CSS or remove it just for HTML to PDF conversion by setting "Custom Javascript" in the API/plugin settings to:

libPdfcrowd.insertStyle({style: '.your-class-with-flex { display: block !important; }'});


CSS page break rules work only for "block level" elements, but flex is not a block level. And all element parents must be "block level" too.
More details:
-- https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside#Formal_definition