page-break-inside: avoid is erratic

[sjohnson32]

I have a complex html template that I am converting to a pdf. It has icons created from several absolute positioned elements. I do not want the page to break in the middle of these icons. I am using css to tag the icon container with "page-break-inside: avoid". When I print the html from the browser, the page breaks work correctly so I'm confident the css is correct. But when the pdf is rendered this css is not honored and the page breaks split the icons.

I am using the same css on another container that contains only text and the page breaks properly around it.
So my question: is there anything in node-html-pdf that would keep certain elements from honoring the css?
I have tried adjusting the page height, format, borders, css and have seen no change to the icon issue.

[zedissime]

I'm using those css rules page-break-inside: avoid and page-break-before: always but It does not seems to work at all. I need to handle the page break mostly for big tables. Is there a solution for that ?

[sjohnson32]

Also unable to get custom fonts to work. Looks like we will be switching to a different tool unless these issue can be fixed.

[zedissime]

@sjohnson32 I ended up using wkhtmltopdf. There is an npm package which make the interface between the binary and your node module. I can use custom font, and the page breaks (in or out of table) work like a charm. I don't know about the absolute elements, but you can give it a try.

[marcbachmann]

lol. I initially used this module because I wasn't able to get wkhtmltopdf to work at all.
this module should work with custom fonts though.

Regarding the page-break-inside issue, you can try to use position: relative on the parent element and on the element you have the css rule.
Apparently that worked for some people: ariya/phantomjs#13524 (comment)

Sorry for the issues. I can't do much to fix those. Maybe we can put together a list with all the issues, so people are aware of them when they try to use this module or another one based on phantomjs.

[zedissime]

@marcbachmann In fact the linked module is only an interface between the binary and the node application. You have two options, install wkhtmltopdf on your environment, or define the path of the binary to use. In my case it was the second option, as I'm making a nwjs application which must embed the binary. Anyway what you are proposing could also be a great option, in my case it wasn't really what I needed.

[ducdev]

For me, it breaks in the middle of line 14, I have no idea to prevent this although I also tried with page-break-inside or page-break-after. It's better if the line 14 will be in next page. Any idea?

[gur111]

It just ignores the page-break-inside property....

[sebgmc]

I have the same issue with WKHTMLTOPDF 0.12.4, regardless of browser used. in a webapp. Even when I say media="print" the print-window/-console does not adhere to the setting, in any browser on Windows. Very frustrating, even making all elements display:block; (which is a prerequisite). It does not matter if I try this on a Hx, p, table, tr, td or div, on all HTML-tags this CSS-setting is ignored. Anyone having this working anywhere?

The settings page-break-before and page-break-after at least are working in the print-window/-console. But not the -inside setting :-(

UPDATE: found a solution/workaround and posted it here: wkhtmltopdf/wkhtmltopdf#2982

[molerat619]

Has anybody found a solution to this issue?

[rmiller-sgntr]

I solved it by adding the following css class to the element you prefer not to break (say the inner-most div you wish to keep in tact):

.no-page-break {
    page-break-inside: avoid;
}

I have seen it in this StackOverflow post .
just make sure that the parent element is not flexbox.

[cmmcneill]

In my case, the problem was a parent element with display: -webkit-box;. It seems page-break-inside is incompatible with a flexbox layout, and it started working as intended after I changed the parent to display: block;.

[vdkkia]

I had many tables in the page and I solved it by using

table {
        page-break-inside: avoid;
        display: block
    }

See image below:

[GvadimI]

Has anybody found a solution to this issue?

This problem is still relevant.

[augustosnk12]

Has anybodoy another working solution?

[vasco3]

@augustosnk12 I noticed that flex-direction: column was causing me this type of problem. I removed all the flex columns and now it respects the page-break-inside: avoid;

[augustosnk12]

@vasco3 Thanks for the answer but I'm not using any flexbox in my code... :'(

[vasco3]

@augustosnk12 are you using grid?

[augustosnk12]

@vasco3 I'm using tables

[AimanMRT]

Avoid to use thead. It work to me while text inside thead become double at the end of page and the top of page below.

[conor909]

I've tested the html in chrome print preview, the css is correct but node-html-pdf seems to break it

[saalihou]

I had height property on an ancestor of the elements I wanted to avoid page breaks on. As soon as I removed them, the elements were no longer being split accross pages. I'll see if I can come up with solid repro steps.