Dompdf: Incorrect indent after pagebreak with inline-block elements.
Problem
When rendering a list of DIVS that shouldnt break inside(page-break-inside: avoid), and inside the DIV there are two DIVS put next to each other using display:inline-block, the first item on the next page will have an unintended left indent.
Steps to reproduce
HTML
<html>
<link rel="stylesheet" type="text/css" href="test.css">
<body>
<article>
{{ repeat the following HTML x 100 }}
<div class="item">
<div class="label">
<div class="label">Lorem</div>
<div class="description">Lorem</div>
</div>
<div class="text">Dolet
</div>
</div>
{{ // end repeat聽}}
</article>
CSS
article .item {
page-break-inside: avoid;
}
article .item .text {
width: 200px;
display: inline-block;
}
article .item .label {
width: 200px;
display: inline-block;
}
PHP
require_once("dompdf/autoload.inc.php");
$html = file_get_contents('test.html');
$dompdf = new \Dompdf\Dompdf();
$options = new \Dompdf\Options();
$options->setIsRemoteEnabled(TRUE);
$dompdf->setOptions($options);
$dompdf->load_html($html);
$dompdf->set_paper('A4');
$dompdf->render();
$dompdf->stream('pdf.pdf');
Screenshot
nuez
All 3 comments
Have the same issue.
ikorgik
on 10 Nov 2016
I'm a little late to the party here, but I was having the same exact issue. To fix this, I put in an empty div before my left + right inline-block div's and added a clear: left style declaration. Seems to be the magic elixir.
See below:
<div class="tableRow" style="display: block; font-size: 9px; overflow: hidden; padding: 0 0 .5em; margin: 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;"><div style="clear:left"></div><div class="leftColumn" style="display:inline-block; margin: 0; padding: 0; width: 35%"><span class="productTypeTitle" style="text-decoration: underline;">{ OUTPUT HERE }</span></div><div class="rightColumn" style="display: inline-block; margin: 0; padding: 0; width: 65%;">{ OUTPUT HERE }</div>
samgkea
on 23 Jan 2017
More simply, based on the answer from @samgkea above, you can put the clear:left declaration on the first inline-block element.
<div class="row">
<div class="col" style="clear:left"></div>
<div class="col"></div>
</div>
mowchan
on 3 Apr 2018
Related issues
enjibby
路
4Comments
SakaSerbia
路
3Comments
whizsid
路
3Comments
PhenX
路
3Comments
nebrot
路
3Comments
Most helpful comment
I'm a little late to the party here, but I was having the same exact issue. To fix this, I put in an empty div before my left + right inline-block div's and added a clear: left style declaration. Seems to be the magic elixir.
See below:
<div class="tableRow" style="display: block; font-size: 9px; overflow: hidden; padding: 0 0 .5em; margin: 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;"><div style="clear:left"></div><div class="leftColumn" style="display:inline-block; margin: 0; padding: 0; width: 35%"><span class="productTypeTitle" style="text-decoration: underline;">{ OUTPUT HERE }</span></div><div class="rightColumn" style="display: inline-block; margin: 0; padding: 0; width: 65%;">{ OUTPUT HERE }</div>