Login/Register
iText flying-saucer page footer shows only on last page
Asked Answered
Solved htmlcssitextflying-saucer
T

1

6

I have html & css used to build my iText flying-saucer page set up like the following...

<html>
    <head>
        <style type="text/css">
            body { padding: 5px; }

            .footer {
                position: running(footer);
                font-size: 11px;
                text-align: center;
            }

            @page {
                @bottom-center {
                    content: element(footer)
                }
            }

            .pagenumber:before {
                content: counter(page)
            }

            .pagecount:before {
                content: counter(pages)
            }
        </style>
    </head>
    <body>
        <div class="content">
            lots of content that spans multiple pages in here...
        </div>
        <div class="footer">
            Page <span class="pagenumber"></span> of <span class="pagecount"></span>
        </div>
    </body>
</html>

Why is the footer only displaying on the last page?

Te answered 6/11, 2013 at 20:43 Comment(0)
T
21

When the "content" was small enough to fit on 1 page, the footer would display fine on that page. Once "content" spanned multiple pages, the footer would only display on the last page.

Turns out that I needed to place the footer BEFORE the content in order for it to be displayed on every page...

<div class="footer">
    Page <span class="pagenumber"></span> of <span class="pagecount"></span>
</div>
<div class="content">
    lots of content that spans multiple pages in here...
</div>

Looks like it's the same deal if headers are involved...they should be before page content.

Some links related to this (the last one being an example of proper format of html/css):

Te answered 6/11, 2013 at 20:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.