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!

score 6 · Answer 1 · answered Jul 26 '16 at 01:13

6

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.

answered Jul 26 '16 at 01:13

aldrien.h

3,437
2
30
52

1

`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! – Pcushing Apr 06 '17 at 18:13
1

Yes. it solved the issue. but than there is alignment issue in `display: inline-table` – Vishal Aug 10 '17 at 11:01
@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? – Jigar Bhatt Nov 25 '19 at 01:45

score 0 · Answer 2 · answered Jul 12 '16 at 09:12

0

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..!

answered Jul 12 '16 at 09:12

Hardik Kanjariya ツ

636
7
17

Hi @Hardik, I just tried the given css in wicked_pdf documentation. It seems like the styles only works with
and not in table ? But currently my template uses table, since it renders many data.
– aldrien.h Jul 12 '16 at 09:19
I have implemented the same, and It works for me.. Have you include CSS using `wicked_pdf_stylesheet_link_tag` ? – Hardik Kanjariya ツ Jul 12 '16 at 09:22
1

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. – aldrien.h Jul 13 '16 at 01:02

score 0 · Answer 3 · answered Jul 12 '16 at 13:23

0

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>

answered Jul 12 '16 at 13:23

Unixmonkey

18,485
7
55
78

I tried to add border to see how it renders, and it not working properly, due to invalid HTML structure. – aldrien.h Jul 13 '16 at 01:15
Hm. It definitely used to. Maybe try the div inside the ``? As an alternative, you could make each row it's own table, and wrap that in a div. That means your ``'s might need to be fixed width, or it won't look too much like a table. – Unixmonkey Jul 13 '16 at 18:52

score 0 · Answer 4 · answered Jan 19 '21 at 11:26

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

Wicked PDF unable to handle page break

4 Answers4