Hi,

We have looked into your page. The problem has to do with how your rows are arranged. Specifically, a combination of the font, height and margin settings caused the rectangle of the last line of text before the page break header row and the page break header row to overlap. The following example demonstrates how this can affect the paging process:

1. Text in the previous row top and bottom position (top = 100, bottom = 120)
2. Row with page-break-before: always (top = 118, bottom = 138)

In this case, if the converter were to break at 118 as requested by the "page-break-before: always", then the text in the previous line would be cut off at y = 118 because the full text height extends to 120. For this reason the pager decided to extend the page-break position to cover the whole line of text to 100. Keep in mind that paging process can not rearrange element positions ---- it only decides where to cut.

The easiest way to avoid this problem is to add some additional top margins on your page-break-before:always row. For example:



Here the additional margin added to this row will add enough space between this row and the text in the previous row so that they won't overlap. As soon as overlap does not occur, the paging process will be able to precisely honor your page-break-before: always instruction.

Hope this helps. Please feel free to let us know if you still have any questions.

Thanks!

Hi,

The easiest way is to use a html table. See here for more details:

http://www.essentialobjects.com/doc/4/htmltopdf/table_header.aspx

While it's possible for you to get element height with JavaScript, you can't use JavaScript to do this kind of layout adjustment. Paging occurs after the page has been rendered. So at that stage you can't rearrange anything.

Thanks!