New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insert page break #212

Closed
johntom opened this Issue Apr 22, 2016 · 2 comments

Comments

Projects
None yet
3 participants
@johntom

johntom commented Apr 22, 2016

Hi,
In my initial test as I extended my dataset in your basic book/author sample data the chart split on the bottom and top of another page. Can on force a page break so that the chart always starts on a new page?
Header
h2 Book sales chart /h2
Chart
Thanks,
John

@pofider

This comment has been minimized.

Contributor

pofider commented Apr 23, 2016

The standard solution would be to use css - page-break-inside:avoid

However there is bug in phantomjs which doesn't apply this style correctly
ariya/phantomjs#10638

Fortunately there is mentioned existing workaround:

.unbreakable
{
    /* page-break-inside: avoid !important; <-- doesn't work*/
    display:inline-block;
}
.unbreakable:after
 {
    display:block;
    height:0px;
    visibility: hidden;
}

You can see this in action in playground
https://playground.jsreport.net/#playground/lkHFBn0xB/557

@pofider pofider closed this Apr 23, 2016

@mattoz0

This comment has been minimized.

mattoz0 commented Jun 28, 2016

I updated ariya/phantomjs#10638 with a fix using CSS3 Regions. My fix gives more control and is slightly less hacky (in my opinion) 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment