Wicked PDF unable to handle page break

Question

I'm using gem wiked_pdf in my Rails application that generates report.

But I'm having trouble fixing the breaking of data when having more that 1 page.

Please see image.

I tried many time to adjust the margin or spacing, but still unable to fix it.

respond_to do |format|
  format.html
  format.pdf do
    render title:         @report_title,
           pdf:           @report_title,
           template:      'applicants/generate_report.pdf.erb',
           encoding:      'UTF-8',
           orientation:   'Landscape',
           layout:        'pdf_template.html',               
           footer: {
                    center:    '[page] of [topage]',
                    right:     "",
                    font_name: 'Arial',
                    font_size: 8                        
                   },
           margin: {
                    top:     10, # default 10 (mm)
                    bottom:  12,
                    left:    7,
                    right:   7 
                   },
          spacing: 0
  end
end

I also tried to apply CSS, like:

@media print {
  td, tr {page-break-inside: avoid; }
  table.full_report_table>tbody>tr>td {page-break-inside: avoid !important; }
}

Nothing works!

Please help!

Elda

Answer 1

SOLVED

Yes,

page-break-inside: avoid;

it is working properly in div tag.

But it took me awhile and had rough research, to figure out how to make it work with long tables.

Adding some CSS style do the trick for me.

As in documentation W3 page-break, it will work with block element.

What I did was to add display style together with it.

<tr style="page-break-inside: avoid; display: inline-table;">

Either, inline-table or inline-block works in my case.

I hope this will help others who encounter the same error as mine.

Elda

display: inline-block; in addition to page-break-inside: avoid; is what finally got this working for me. I think the combination of these two needs to be emphasized more. Thanks for doing so! – Fabio

Yes. it solved the issue. but than there is alignment issue in display: inline-table – Amide

@aldrien page break issue is resilved but due to display: inline-table CSS, my design spoil, can you please give me sugesstion to resolved it? – Operator

Answer 2

You need to create one class and apply below CSS into it :

div.alwaysbreak { page-break-before: always; }

For Example, In my case :

<div class="alwaysbreak">
   // My PDF Template
</div>

Hope this helps..!

Plaque

Hi @Hardik, I just tried the given css in wicked_pdf documentation. It seems like the styles only works with <div> and not in table ? But currently my template uses table, since it renders many data. – Elda

I have implemented the same, and It works for me.. Have you include CSS using wicked_pdf_stylesheet_link_tag ? – Chayachayote

Hi @Hardik, yes I used wicked_pdf_stylesheet_link_tag declaring sa CSS on my pdf template. Have you tried to use that css in tr or td tags ? Doesn't worked on me. – Elda

Answer 3

I've gotten around this issue in the past by wrapping each table row in a div with the css page-break-inside: avoid;.

I know it isn't semantically correct, but it works.

That should ensure it transitions pages without cutting off table content in the middle of a row:

<style>
  .nobreak:before {
    clear: both;
  }
  .nobreak {
    page-break-inside: avoid;
  }
</style>
<table>
  <div class="nobreak">
    <tr>
      <td>First row</td>
    </tr>
  </div>
  <div class="nobreak">
    <tr>
      <td>Second row</td>
    </tr>
  </div>
</table>

Zimmermann

I tried to add border to see how it renders, and it not working properly, due to invalid HTML structure. – Elda

Hm. It definitely used to. Maybe try the div inside the <tr>? As an alternative, you could make each row it's own table, and wrap that in a div. That means your <td>'s might need to be fixed width, or it won't look too much like a table. – Zimmermann

Answer 4

Simplty put a div at last of your html code. like

<% @questions.each do |question| %>
  <% if question.id == @questions.last.id %>
    <div></div>
  <% end %>
<% end %>

After adding a division in your html.put the following line in your css:

div.alwaysbreak { page-break-before: always; }
div.nobreak:before { clear:both; }
div.nobreak{ page-break-inside: avoid; }

It works for me

Fetter