Wicked_pdf: Header and footer covering part of the content

Created on 30 Jan 2013 · 19Comments · Source: mileszs/wicked_pdf

Hello people!

I'm having some problems using headers and footers: the header/footer is covering parte of the content at the page break.

The first page works fine, but the second page onwards, this problem occurs.

second-page

third-page

My WickedPdf initializer:

WickedPdf.config = {
  :layout => 'layout',
  :margin => {
    :top => 38,
    :bottom => 25
  }
}

My controller:

format.pdf do
        render :pdf => 'consulta',
               :header => {
                  :html => {
                     :template => 'layouts/pdf-header.html'
                  }
               },
               :footer => {
                  :html => {
                     :template => 'layouts/pdf-footer.html'
                  }
               }
      end

Is there any way to fix this?

Thanks a lot!

Source

jalerson

👍1

Most helpful comment

Thats right! With martin-top => 50 and :spacing => 10 works fine! =)

I will try to configure the footer now =)

Thanks a lot guys!

jalerson on 30 Jan 2013

👍3 ❤1 🎉1

All 19 comments

Those margins you set in your initializer are being used for the body, headers, and footers too. Try tweaking them for the individual parts.

unixmonkey on 30 Jan 2013

Hi @unixmonkey ! Thanks for your answer!

How can I adjust them for individual parts?

Removing the margins of the initializer and set the margin-top to 100px of body tag of the header, the content is still hidden back to the header.

cover-content

Here is my header's content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  </head>
  <body style="margin-top: 100px;">
    <table>
      <tr>
        <th><%= wicked_pdf_image_tag('uep-ufrn.JPG') %></th>
        <th>
          UNIVERSIDADE FEDERAL DO RN - UFRN<br/>
          DEPARTAMENTO DE PEDIATRIA - HOSPED<br/>
          UNIDADE DE ENDOCRINOLOGIA PEDIÁTRICA<br/>
          AMBULATÓRIO DE DIABETES
        </th>
        <th><%= wicked_pdf_image_tag('ufrn.jpg') %></th>
      </tr>
    </table>
  </body>
</html>

jalerson on 30 Jan 2013

format.pdf do
    render :pdf => 'consulta',
           :margin => { :top => 0, :bottom => 0 } # margin on body
           :header => {
              :margin => { :top => 0, :bottom => 0 }, # margin on header
              :html => {
                 :template => 'layouts/pdf-header.html',
              }
           },
           :footer => {
              :margin => { :top => 0, :bottom => 0 }, # margin on footer
              :html => {
                 :template => 'layouts/pdf-footer.html'
              }
           }
  end

unixmonkey on 30 Jan 2013

Hi @unixmonkey,

apparently the margin configuration into header has no effect.

Look my controller:

format.pdf do
        render :pdf => 'consulta',
               :margin => {
                  :top => 0,
                  :bottom => 0
               },
               :header => {
                  :html => {
                     :template => 'layouts/pdf-header.html',
                     :margin => { :top => 100, :bottom => 100 }
                  }
               },
               :footer => {
                  :html => {
                     :template => 'layouts/pdf-footer.html'
                  }
               }
      end

marginconfiguration

jalerson on 30 Jan 2013

@jalerson, I had the same problem, please look at my last comment in #181 to see how I fixed it, theres a spacing option on both header an footer.

EnriqueVidal on 30 Jan 2013

👍2

Hey guys, I really appreciate your answers! Thanks a lot!

But I'm still losing content behind the header.

The best result I got was this:

bestresult

With this configuration:

format.pdf do
        render :pdf => 'consulta',
               :margin => {
                  :top => 40,
                  :bottom => 0
               },
               :header => {
                  :spacing => 0,
                  :html => {
                    :template => 'layouts/pdf-header.html'
                  }
               },
               :footer => {
                  :html => {
                     :template => 'layouts/pdf-footer.html'
                  }
               }
      end

jalerson on 30 Jan 2013

set the :spacing option to a higher value than 0. Maybe start high and work backwards (like 50 or 30).

unixmonkey on 30 Jan 2013

With :spacing => 50

      format.pdf do
        render :pdf => 'consulta',
               :margin => {
                  :top => 40,
                  :bottom => 0
               },
               :header => {
                  :spacing => 50,
                  :html => {
                    :template => 'layouts/pdf-header.html'
                  }
               },
               :footer => {
                  :html => {
                     :template => 'layouts/pdf-footer.html'
                  }
               }
      end

I got this:

spacing50

With :spacing => 30

      format.pdf do
        render :pdf => 'consulta',
               :margin => {
                  :top => 40,
                  :bottom => 0
               },
               :header => {
                  :spacing => 30,
                  :html => {
                    :template => 'layouts/pdf-header.html'
                  }
               },
               :footer => {
                  :html => {
                     :template => 'layouts/pdf-footer.html'
                  }
               }
      end

I got this:

spacing30

jalerson on 30 Jan 2013

👍1

Looks like it's getting there. Notch it down to 20 or 15 (and tweak from there).

unixmonkey on 30 Jan 2013

Thats right! With martin-top => 50 and :spacing => 10 works fine! =)

I will try to configure the footer now =)

Thanks a lot guys!

jalerson on 30 Jan 2013

👍3 ❤1 🎉1

Thats right! With martin-top => 50 and :spacing => 10 works fine! =)

I will try to configure the footer now =)

Thanks a lot guys!

jalerson on 30 Jan 2013

this solved my issue i have been trying for the last two weeks. this is the only tutorial i found useful very helpful
thank you guys

udaykiranreddy on 7 Aug 2013

@udaykiranreddy this solved mine too, thanks a lot!

Xuhao on 11 Feb 2014

It's not solved when we use cover, the document margins are present in cover.

captura de pantalla 2014-10-26 04 43 36

ffigueroa on 26 Oct 2014

👍2

I'm having trouble fixing the page break.
I'm using table to iterate the data, but when it gets to another page...the breaking of data happens.

please see my question in stackoverflow http://stackoverflow.com/questions/38323519/wicked-pdf-unable-to-handle-page-break

here is the sample error.
wicked

aldrienht on 12 Jul 2016

I've added an answer to the StackOverflow post, but for posterity here:

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>

unixmonkey on 12 Jul 2016

@jalerson tweaking header's spacing and content's margin top I could solve this. Saved my day :D