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:

Use page-break-inside as described here or here

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

putting text within a div, as explained here
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.

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. — rainabba
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 — RickMeasham
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. — RickMeasham
@RickMeasham Thank you. But how can i install this wkhtmltopdf package on my MAC or Centos server ? — Nhat Dinh
@RickMeasham sorry I thought you we're providing the perspective of a maintainer of the project — TheRealMrCrowley

Biskrem Muhammad Biskrem Muhammad · Accepted Answer · 2018-07-16T22:56:36

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

Wicked_pdf avoid page-break-inside not working

1 Answers