Page break in pdf not working if object spans multiple pages

Issue

I am adding a javascript pdf generator based on a webpage. In this pdf users can pick if they'd like to print one "chapter" per page.

The page is generated with angularjs and the "chapters" are loaded in with a ng-repeat.

I used a ng-class to decide if it should make the pdf with or without the page-breaks

My css is as follows

  .withoutPageBreak{
    page-break-before: avoid;
    page-break-after: avoid;
  }

  .withPageBreak{
    page-break-before: always;
    page-break-inside: auto;
    min-height: 842px;
  }

(min-height is to represent one pdf page in the front end)

In some cases a "chapter" can span more then one pdf page. When a "chapter" spans more then one page the pdf will put the next "chapter" directly under the multipage "chapter".

Is there a way to prevent this behavor and put the next "chapter" after a mulipage one on the next page?

Solution

I just went through this exact same issue.

Instead of using the css class as you are, add a div to the bottom of each chapter that you can turn on or off:

<div style="page-break-after: always"></div>

Answered By - Dan Mullin