page content overflows to additional pages on PDF export

2,754 views
Skip to first unread message

Dan Steeby

unread,
Oct 23, 2015, 12:17:51 PM10/23/15
to dompdf
I am trying to force content that is on a page to stay on one page, 'cutting off' any content that cannot fit on the physical page when output to PDF.  Our HTML structure uses a div.page to handle what constitutes a 'page' in our content, and we have CSS rules in place to give these elements a fixed height and width which corresponds to the DOMPDF page size (612pt x 792pt), and have also included overflow: hidden and page-break-inside: avoid; rules as well.  We are not using min-height or max-height in our code for this element to define this.  From what I have read, these 3 style rules should do what I want, which is to simply not display any content that overflows beyond the boundaries of the page div's fixed size when the PDF is rendered.  This is working as expected when viewing the HTML in the browser rather than passing the HTML to DOMPDF, but on rendering the PDF, the 'overflowed' content is rendered to an additional page in the PDF, and this continues across however many pages are needed until the content has all been dumped.  

Is there a way to handle this?  I do seem to find others talking about it working for them, but I have implemented everything suggested in those conversations and am not getting the expected results.  Happy to supply HTML and PDF examples if needed.

BrianS

unread,
Oct 23, 2015, 1:22:09 PM10/23/15
to dompdf
There does appear to be a problem around the hidden content forcing a page break. I believe that even if the content is hidden it's still rendered, which is probably something we'll need to look at in the future. It could be that we stop the "cursor" at the point where the content is hidden. Or it could be that we do not render hidden content at all.

There's also the problem of paging elements close to the edge of the page, which does cause some problems with dompdf. This also needs a bit of work.

The best method I've found for handling this type of situation is to position your page elements absolutely. The overflow content should not, in that instance, cause a page break. And you can ensure each page element is on its own page by using the page-break styling. For example:

<html>
   
<head>
     
<style>
        div
.page { position: absolute; top: 0px bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%; overflow: hidden; page-break-before: always; }
        div
.page:first-child { page-break-before: never; }
     
</style>
   
</head>
   
<body>
     
<div class="page">
        ...
     
</div>
     
<div class="page">
        ...
     
</div>
   
</body>
</html>
Reply all
Reply to author
Forward
0 new messages