Header and footer covering part of the content

jalerson commented 11 years ago

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!

unixmonkey commented 11 years ago

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

jalerson commented 11 years ago

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>

unixmonkey commented 11 years ago

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

jalerson commented 11 years ago

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

EnriqueVidal commented 11 years ago

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

jalerson commented 11 years ago

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

unixmonkey commented 11 years ago

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

jalerson commented 11 years ago

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

unixmonkey commented 11 years ago

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

jalerson commented 11 years ago

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

I will try to configure the footer now =)

Thanks a lot guys!

jalerson commented 11 years ago

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

I will try to configure the footer now =)

Thanks a lot guys!

udaykiranreddy commented 11 years ago

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

Xuhao commented 10 years ago

@udaykiranreddy this solved mine too, thanks a lot!

ffigueroa commented 10 years ago

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

captura de pantalla 2014-10-26 04 43 36

aldrienht commented 8 years ago

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

unixmonkey commented 8 years ago

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>

cesc1989 commented 7 years ago

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

JoaoSeger commented 7 years ago

@unixmonkey I'm not achieving the use of margin in the bottom footer. Do you have an example?

jembuilt commented 6 years ago

It would be really great if you guys would create a tutorial on this. All the learning here... I'd watch it

mileszs / wicked_pdf

Header and footer covering part of the content #185