Rotativa generated PDF doesn't render correctly - page break/element break

Question

I've been turning the web upside down for the past hour or so but can't seem to find the solution for my rendering problem.

I'm using Rotativa (1.6.4) as the PDF creation library which was capable to reproduce the HTML I threw at it with almost 100% accuracy. Why almost; because it seems that charts I'm converting to PDF cause problems when chart doesn't fit the page and it should be transferred to the next page. Check the screenshot for more details.

As can be seen from the screenshot one chart is overlapping which happens for, to me, unknown reason.

I tried adding suggested page breakers but without any help:

.page-breaker {
  display: block;
  clear: both;
  page-break-after: always;
 }

Wrappers around charts have the following CSS rules:

.chartContainer {
  float: left;
  clear: both;
  width: 100%;
  height: 350px;
  margin: 20px auto;
  page-break-before: always;
  page-break-after: always;
}

Not only does the PDF generated by Rotativa render incorrectly, the same thing goes for print preview in Chrome. So, the problem obviously is somewhere between page breaks and CSS - but the solution is still out there.

Any help would be appreciated.

Answer 1

Forget about adding page-break-before or page-break-after. The solution is to add page-break-inside: avoid !important rule. Rule should be added to the container/wrapper of the elements that could get broken in page break.