CODEWITHSUNDEEP
htmlcssdompdfpage-break-inside
user2887380
user2887380

Reputation: 73

DOMPDF - Can't get page-break-inside to work

I have a really simple page that displays a number of sections. Each section has a header and then some bullets. I'd like to make it so that if an entire section cannot fit on the page then it moves to the next page.

To achieve this I have wrapped each section in a div element like so ..

<div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'>

The result that I get is that the bullets do not break inside (which is good) however the section header does not stay with the bullets (which is bad).

Any help that can be provided would be very appreciated.

Here is the PHP code I'm using:

$html = "<html><head></head><body>";
$result = mysql_query("SELECT comment from comments");
while ($row = mysql_fetch_array($result)) { 
    $html .= "<div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'>\n";
    $html .= $row['comment'] . "\n";
    $html .= "</div>\n";
}
$html .= "\n</body></html>";

$dompdf = new DOMPDF();
$dompdf->load_html($html);
$dompdf->render();
$output = $dompdf->output();
$dompdf->stream("$filename.pdf");

Here is the HTML that is generated:

<html><head></head><body><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">BID VALIDITY:<br></span><ul><li>This ACME Painting proposal is valid until ------</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">ENGINEERING NOTES:</span><br><ul><li>Vessel to be designed to include 100% Radiography of Long &amp; Girth seams per ASME prior to PWHT</li><li>All back gouge / root welds shall undergo MPT (Magnetic Particle Testing)</li><li>All external welds shall undergo MPT after fabrication</li><li>All nozzles subject to 100% ultrasonic inspection, Cat. D joints.<br></li></ul></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">HEALTH &amp; SAFETY:<br></span><ul><li>The goal of this project is to treat safety and welfare of each employee as the number one priority.</li><li>Project target is ZERO recordable injuries.</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">OVERTIME RATES FOR EXPEDITED DELIVERY:<br><br>Premium - Time + One Half<br></span><ul><li>Time and one half hour pay shall be for all hours Monday - Friday (Day Shift) when employee exceeds 8.5 hours in one day.<br></li><li>Time and one half hour pay shall be paid for the first two hours beyond 8.5 hours.</li><li>Rate:&nbsp; $60/hr (CDN)</li></ul><p><br></p><p><span style="font-weight: bold;">Premium - Double Time</span><br><ul><li>Double time pay shall be for all hours Monday - Friday (Day Shift) when employee exceeds 10.5 hours in one day.</li><li>Double time pay shall be for all hours Monday - Thursday (Night Shift) when employee exceeds 10 hours in one day.</li><li>Double time pay shall be for all weekend hours Saturday - Sunday (Day Shift).</li><li>Double time pay shall be for all weekend hours Friday - Sunday (Night Shift).<br></li><li>Rate:&nbsp; $100/hr (CDN)</li></ul><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">DRAWING AND DOCUMENT DELIVERY:<br></span><ul><li>Drawing and Engineering documents to be submitted starting in 2-3 weeks after receipt of order.<br></li><li>Welding and NDE procedures and related shall be submitted 2-3 weeks after receipt of order.<br></li><li>Drawings and Engineering documents shall be returned to HWE 7 working days after submission.</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">FABRICATION DELIVERY:<br></span><ul><li>Final fabrication will ship 10-12 weeks after receipt of Major Material and Fully Approved Drawings</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">ENGINEERING NOTES:</span><br><ul><li>Vessel to be designed to include 100% Radiography of Long &amp; Girth seams per ASME prior to PWHT</li><li>All back gouge / root welds shall undergo MPT (Magnetic Particle Testing)</li><li>All external welds shall undergo MPT after fabrication</li><li>All nozzles subject to 100% ultrasonic inspection, Cat. D joints.<br></li></ul></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">DELIVERY NOTES:</span><br><ul><li>Material delivery subject to review of Mill lead time and confirmation of delivery at time of order entry at Mill</li><li>ACME Painting Enterprises Limited will not accept responsibility or liquidated damages / contractual impact for delays at Mill or by Origin Material manufacturer</li><li>Fabrication and Delivery subject to review of shop loading at time of order<br></li></ul></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">DRAWING AND DOCUMENT DELIVERY:<br></span><ul><li>Drawing and Engineering documents to be submitted starting in 2-3 weeks after receipt of order.<br></li><li>Welding and NDE procedures and related shall be submitted 2-3 weeks after receipt of order.<br></li><li>Drawings and Engineering documents shall be returned to HWE 7 working days after submission.</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">FABRICATION DELIVERY:<br></span><ul><li>Final fabrication will ship 10-12 weeks after receipt of Major Material and Fully Approved Drawings</li></ul><p><br></p></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">ENGINEERING NOTES:</span><br><ul><li>Vessel to be designed to include 100% Radiography of Long &amp; Girth seams per ASME prior to PWHT</li><li>All back gouge / root welds shall undergo MPT (Magnetic Particle Testing)</li><li>All external welds shall undergo MPT after fabrication</li><li>All nozzles subject to 100% ultrasonic inspection, Cat. D joints.<br></li></ul></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">DELIVERY NOTES:</span><br><ul><li>Material delivery subject to review of Mill lead time and confirmation of delivery at time of order entry at Mill</li><li>ACME Painting Enterprises Limited will not accept responsibility or liquidated damages / contractual impact for delays at Mill or by Origin Material manufacturer</li><li>Fabrication and Delivery subject to review of shop loading at time of order<br></li></ul></div><div style='page-break-inside:avoid; break-inside: avoid; -webkit-column-break-inside: avoid;'><span style="font-weight: bold;">ENGINEERING NOTES:</span><br><ul><li>Vessel to be designed to include 100% Radiography of Long &amp; Girth seams per ASME prior to PWHT</li><li>All back gouge / root welds shall undergo MPT (Magnetic Particle Testing)</li><li>All external welds shall undergo MPT after fabrication</li><li>All nozzles subject to 100% ultrasonic inspection, Cat. D joints.<br></li></ul></div></body></html>

Lastly, I have included a screen shot of the resulting page break ...

Page Break Screen Shot

Upvotes: 3

Views: 1608

Answers (1)

BrianS
BrianS

Reputation: 13944

In v0.6.1 this seems to be a bit of buggy behavior related to that functionality. Because you do not enclose your text in a block-level element dompdf does not appear to be able to track it for flow to the next page (a first guess at the issue). The fix seems to be to wrap that text in a block-level element.

The code sample you provided doesn't seem amenable to fixing the issue, but you want to try aiming for is something like:

<div class='c2'>
  <p><span class="c1">DRAWING AND DOCUMENT DELIVERY:</span></p>
  <ul>
    <li>Drawing and Engineering documents to be submitted starting in 2-3 weeks after receipt of order.<br></li>
    <li>Welding and NDE procedures and related shall be submitted 2-3 weeks after receipt of order.<br></li>
    <li>Drawings and Engineering documents shall be returned to HWE 7 working days after submission.</li>
  </ul>
  <p><br></p>
</div>

Upvotes: 1

Related Questions