iText flying-saucer page footer shows only on last page

StackOverflow https://stackoverflow.com/questions/19822420

  •  04-07-2022
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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):

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top