Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wicked_pdf avoid page-break-inside not working

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

enter image description here

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; }

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

like image 714
Nhat Dinh Avatar asked Feb 20 '17 10:02

Nhat Dinh


People also ask

Why won't Wicked PDF load the latest commit information?

Failed to load latest commit information. Wicked PDF uses the shell utility wkhtmltopdf to serve a PDF file to a user from HTML. In other words, rather than dealing with a PDF generation DSL of some sort, you simply write an HTML view as you would normally, then let Wicked PDF take care of the hard stuff.

How to avoid page break in h4cc/wkhtmltopdf-amd64?

I have struggled a lot with the issue, using latest h4cc/wkhtmltopdf-amd64 version 0.12.4 and finally made it working by downgrading the version of the package to 0.12.3! To avoid page break, We can use page break avoid css option. Break any content (Image/ Text) and make it appear in the next page

How do I get page breaks to work?

If you can't get page breaks working, try to divide and conquer by removing half the CSS in stages and seeing if it works. I found this ridiculous solution, but it's worked very well for me :) and then the table would not break. Another option: place each tr in its own tbody and then apply the peage break css rules to the tbody.

Why do my pages break in the middle of text?

Pages break in the middle of text when you have elements longer than one page. This is a more complicated issue that there's no fix for currently, but the vast majority of page-break needs should have been resolved with v0.9.1.


1 Answers

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

like image 174
Biskrem Muhammad Avatar answered Nov 09 '22 20:11

Biskrem Muhammad