Note that there are some explanatory texts on larger screens.

plurals
  1. POPdf is not working with css page break after :always
    primarykey
    data
    text
    <p>I am creating a PDF with CSS page breaks, but the PDF is not not breaking the page. When I remove <code>postion:absolute</code> it works, but it creates space after every page. I think it's a CSS problem but I'm not sure.</p> <p>If there is problem with the CSS, how I can resolve it?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt; PDF &lt;/title&gt; &lt;style type="text/css"&gt; &lt;!-- body { font-family: Arial; font-size: 33.0px } .pos { position: absolute; z-index: 0; left: 0px; top: 0px } --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="page-break-after: always;"&gt; &lt;div class="pos" id="_0:0" style="top:0"&gt;&lt;img name="_1170:828" src="page_001.jpg" height="1170" width="828" border="0" usemap="#Map" /&gt;&lt;/div&gt; &lt;div class="pos" id="_126:284" style="top:284;left:126"&gt; &lt;span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd"&gt;Documents for the&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_126:323" style="top:323;left:126"&gt; &lt;span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd"&gt;procurement&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_138:975" style="top:975;left:138"&gt; &lt;span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd"&gt;Return Date:&lt;span&gt;12-08-2014&lt;/span&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_492:975" style="top:975;left:492"&gt; &lt;span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd"&gt;Reference No : test&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_609:1094" style="top:1094;left:609"&gt; &lt;span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000"&gt; &lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="page-break-after: always;"&gt; &lt;div class="pos" id="_0:0" style="top:1170"&gt;&lt;img name="_1170:827" src="page_002.jpg" height="1170" width="827" border="0" usemap="#Map" /&gt;&lt;/div&gt; &lt;div class="pos" id="_157:1357" style="top:1357;left:157"&gt; &lt;span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#61c5c5"&gt;Contents&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_414:1348" style="top:1348;left:414"&gt; &lt;span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc"&gt;Part 01&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_414:1392" style="top:1392;left:414"&gt; &lt;span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000"&gt;INTRODUCTION&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_154:1560" style="top:1560;left:154"&gt; &lt;span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc"&gt;Part 02&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_414:1569" style="top:1569;left:414"&gt; &lt;span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc"&gt;Part 03&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_154:1597" style="top:1597;left:154"&gt; &lt;span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000"&gt;PASS / FAIL&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_154:1615" style="top:1615;left:154"&gt; &lt;span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000"&gt;REQUIREMENTS&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_414:1607" style="top:1607;left:414"&gt; &lt;span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000"&gt;SELECTION CRITERIA&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div style="page-break-after: always;"&gt; &lt;div class="pos" id="_0:0" style="top:2340"&gt;&lt;img name="_1170:827" src="page_003.jpg" height="1170" width="827" border="0" usemap="#Map" /&gt;&lt;/div&gt; &lt;div class="pos" id="_168:2645" style="top:2645;left:168"&gt; &lt;span id="_65.4" style="font-family:Arial; font-size:65.4px; color:#fcfcfc"&gt;Part 01&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_168:2782" style="top:2782;left:168"&gt; &lt;span id="_24.5" style="font-weight:bold; font-family:Arial; font-size:24.5px; color:#000000"&gt;INTRODUCTION&lt;/span&gt; &lt;/div&gt; &lt;div class="pos" id="_737:3442" style="top:3442;left:737"&gt; &lt;span id="_19.1" style="font-style:italic; font-family:Times New Roman; font-size:19.1px; color:#000000"&gt;1&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload