Running header overlaps the rest of the text

362 views
Skip to first unread message

Vlad Dima

unread,
Jan 21, 2014, 10:59:41 AM1/21/14
to flying-sa...@googlegroups.com
I am using Flying Saucer R8 to generate PDF files. The PDFs need a header which is going to be repeated on every page. The header is going to be specified by the user so I am unable to determine it's height. I managed to make the header repeat on every page but the problem is that if the header has more than one row of text, it does not dynamically readjust the height of the body and it ends up overlapping it. Adding a margin or padding to the text does not help. Here is my code:

<!DOCTYPE html>
<html>
<head>
<style>
@page {
    size: 4.18in 6.88in;
    margin: 0.25in;
    @top-center {content: element(header);}
}
#header {
    color: red;
    display: block;
    position: running(header);  
}

</style>
</head>
<body>
    <div id="header">
        <-- Lots of text here --> 
    </div>
    <div class="section">
        <-- Lots of text here -->   
    </div>
</body>
</html>

After generating with Flying Saucer the resulting PDF looks like this.


Can anyone please help me find a solution for my header not to overlap with the rest of the body?

Peter Brant

unread,
Jan 21, 2014, 11:43:50 AM1/21/14
to flying-sa...@googlegroups.com
Dynamically-sized margin boxes are not supported (either by the spec or by FS).

The only thing I can think is a programmatic solution where you do a test render with just the header and then use the document extents to dynamically construct the relevant CSS.

Pete




--
You received this message because you are subscribed to the Google Groups "Flying Saucer Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flying-saucer-u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Peter Brant

unread,
Jan 21, 2014, 11:46:17 AM1/21/14
to flying-sa...@googlegroups.com
One other note (probably already clear)... margin boxes are laid out in the margin.  i.e. @page { margin: xxx } defines how much space your margin box has.  The formatting within the margin box is then controlled by the margin box's content.

Pete


Reply all
Reply to author
Forward
0 new messages