Wicked_pdf: cannot add margin with dynamic footer

Created on 7 Nov 2016 · 1Comment · Source: mileszs/wicked_pdf

I am trying to create a multipage pdf with dynamic footer using the instructions for page numbering from the docs.
When I have no margin set the footer renders properly on each page (but overlaps the content)

When I set the margin

pdf = WickedPdf.new.pdf_from_string(html, footer: {content: footer}, margin: {top: 10, bottom: 10})

only the footer on the first page shows up.

I have tried playing around with the margin on the whole pdf and just the footer to no avail.

Source

jrdnndtsch

Most helpful comment

Hi, this question is a bit old, but this is what worked for me:

footer = render_to_string( partial: 'footer', formats: :html )
pdf = WickedPdf.new.pdf_from_string(html, 
          margin: { top: 10, bottom: 10 },
          footer: {
            content: footer,
            spacing: 0
          })

where _footer.html.erb is

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    footer {
      display: block;
      position: relative;
      width: 687px;
      padding: 0;
      bottom: 0px;
    }

    footer .footer_content {
      padding-bottom: 30px;
    }
    </style>
  </head>
  <body>

    <footer class="footer">
      <div class="footer_content">
        <p>My content here</p>
      </div>
    </footer>

  </body>
</html>

lucabusin on 14 Jun 2017

👍3

>All comments

Hi, this question is a bit old, but this is what worked for me:

footer = render_to_string( partial: 'footer', formats: :html )
pdf = WickedPdf.new.pdf_from_string(html, 
          margin: { top: 10, bottom: 10 },
          footer: {
            content: footer,
            spacing: 0
          })

where _footer.html.erb is

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    footer {
      display: block;
      position: relative;
      width: 687px;
      padding: 0;
      bottom: 0px;
    }

    footer .footer_content {
      padding-bottom: 30px;
    }
    </style>
  </head>
  <body>

    <footer class="footer">
      <div class="footer_content">
        <p>My content here</p>
      </div>
    </footer>

  </body>
</html>

lucabusin on 14 Jun 2017

👍3

Was this page helpful?

0 / 5 - 0 ratings