Footer spans top and bottom of chrome-pdf page, not just bottom :(

rconstantine

I have a PDF footer template as defined here:

<div style="font-family: 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px;">
    <hr>
    <span style="left: 35px; position: absolute; bottom: 0px;">Printed: {{getTodayFormatted}}</span>
    <span style="left: 400px; position: absolute; bottom: 0px;">Page {{$pdf.pageNumber}} of {{$pdf.pages.length}}</span>
    <span style="left: 680px; position: absolute; bottom: 0px;">SutterNow Reports</span>
</div>
<div>-</div>

The three spans show on the bottom of the page. The <hr> shows at the top of the page, before my header. The hyphen (which is defined in a DIV after the main DIV) also shows above the header!!! What is going on?

Also, I can't get the first DIV to be above the edge of the page. margin-bottom isn't moving it up. My footer is defined as 1.5cm tall, which should be enough.

bjrmatos

it is hard to layout the footer, at least using position absolute, because it can shoot you in the foot as you have seen. i would recommend you to use flexbox for the layout it works consistenly across pages. you can take a look at the css of this example https://playground.jsreport.net/w/admin/Wy6stA8t to get an idea what is the css that you need to get a footer placed correctly.

if you don't want to use flexbox you can share a live example on playground of your template and i will try to update it to match your expectations

rconstantine

Thanks man. I've got a couple of weeks left on the demo license, but it's looking good. What I have left to try are: 1) calling the report from my client app and include parameters, 2) figuring out the scheduling module, 3) figuring out how to save any or all reports to the server for later viewing, and 4) send reports to users via email.

If I can do all of that, then that's everything I need and we can move forward on licensing. Thanks for the help so far.