Wicked_pdf avoid page-break-inside not working

Question

This is the result when i use Wicked_pdf to convert my html.erb page to pdf.

Problem: Seem table 's tr has been splitted into two pages.

What i tried without success:

1. Use page-break-inside as described here or here

table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; }

2. putting text within a div, as explained here
3. here

Another option: place each tr in its own tbody and then apply the peage break css rules to the tbody. Tables support multiple tbodys. A bit of extra markup, but works decently for me.

I am using Ruby on Rails 4.2.6, Wicked_pdf latest version, bootstrap.

Relate issue on github

Question: How can i make table 's tr not split into two pages.

Cadge

Your first page isn't filling up is it? I see no gap at the bottom of the first page which is why I ask. If it fills up, nothing will prevent the page break except defining a larger page when you run wkhtml2pdf. If you been provide a more complete screenshot a well as the exact HTML and CSS that you're using, you'll make more and better answers possible. – Indoiranian

I created a pull request that fixes this issue in May last year. The project maintainer hasn't merged it yet. Grab my fork of the Qt project and compile it. github.com/wkhtmltopdf/qt/pull/29 – Ionone

The pull request has now been merged into the project. See if that solves your problem. We've had it in production since June last year without a repeat of the issue. – Ionone

@Ionone Thank you. But how can i install this wkhtmltopdf package on my MAC or Centos server ? – Cadge

@Ionone without a repeat of the issue, isn't just misleading but straight up false. Im on 0.12.4 and am still experiencing this problem – Vicarial

@Vicarial .. please re-read: "See if that solves your problem" doesn't promise it does. "We've had it .. without a repeat" is my experience. Again, no promises. – Ionone

@Ionone sorry I thought you we're providing the perspective of a maintainer of the project – Vicarial

Answer 1

well, to solve this you have to user page-break-inside: avoid !important; with the repeated div the results in this overflow.

like if you have:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

which results in overflow that will make things overlap with the header within the page breaks..

so >> use: page-break-inside: avoid !important; with this class article.

table.report-container div.article {
    page-break-inside: avoid;
}

---> here is a full answer to print a page properly using html/css

Sinuous