The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure.

If the issue lies within the CSS, how can I troubleshoot and fix it?

<html>
<head>    
  <title> PDF </title>
  <style type="text/css">
    <!--
      body { font-family: Arial; font-size: 33.0px }
      .pos { position: absolute; z-index: 0; left: 0px; top: 0px }
    -->
  </style>
</head>

<body>
  <div style="page-break-after: always;">
    <div class="pos" id="_0:0" style="top:0"><img name="_1170:828" src="page_001.jpg"
    height="1170" width="828" border="0" usemap="#Map" /></div>

    <div class="pos" id="_126:284" style="top:284;left:126">
      <span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">Documents for the</span>
    </div>

    <div class="pos" id="_126:323" style="top:323;left:126">
      <span id="_30.8" style="font-family:Arial; font-size:30.8px; color:#fdfffd">procurement</span>
    </div>

    <div class="pos" id="_138:975" style="top:975;left:138">
      <span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Return
      Date:<span>12-08-2014</span></span>
    </div>

    <div class="pos" id="_492:975" style="top:975;left:492">
      <span id="_15.4" style="font-weight:bold; font-family:Arial; font-size:15.4px; color:#fdfffd">Reference No : test</span>
    </div>

    <div class="pos" id="_609:1094" style="top:1094;left:609">
      <span id="_13.6" style="font-weight:bold;font-style:italic; font-family:Palatino Linotype; font-size:13.6px; color:#000000">
      </span>
    </div>
  </div>

  <div style="page-break-after: always;">
    <div class="pos" id="_0:0" style="top:1170"><img name="_1170:827" src="page_002.jpg"
    height="1170" width="827" border="0" usemap="#Map" /></div>

    <div class="pos" id="_157:1357" style="top:1357;left:157">
      <span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#61c5c5">Contents</span>
    </div>

    <div class="pos" id="_414:1348" style="top:1348;left:414">
      <span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
      01</span>
    </div>

    <div class="pos" id="_414:1392" style="top:1392;left:414">
      <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">INTRODUCTION</span>
    </div>

    <div class="pos" id="_154:1560" style="top:1560;left:154">
      <span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
      02</span>
    </div>

    <div class="pos" id="_414:1569" style="top:1569;left:414">
      <span id="_24.5" style="font-family:Arial; font-size:24.5px; color:#fcfcfc">Part
      03</span>
    </div>

    <div class="pos" id="_154:1597" style="top:1597;left:154">
      <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">PASS /
      FAIL</span>
    </div>

    <div class="pos" id="_154:1615" style="top:1615;left:154">
      <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">REQUIREMENTS</span>
    </div>

    <div class="pos" id="_414:1607" style="top:1607;left:414">
      <span id="_15.0" style="font-weight:bold; font-family:Arial; font-size:15.0px; color:#000000">SELECTION
      CRITERIA</span>
    </div>
  </div>

  <div style="page-break-after: always;">
    <div class="pos" id="_0:0" style="top:2340"><img name="_1170:827" src="page_003.jpg"
    height="1170" width="827" border="0" usemap="#Map" /></div>

    <div class="pos" id="_168:2645" style="top:2645;left:168">
      <span id="_65.4" style="font-family:Arial; font-size:65.4px; color:#fcfcfc">Part
      01</span>
    </div>

    <div class="pos" id="_168:2782" style="top:2782;left:168">
      <span id="_24.5" style="font-weight:bold; font-family:Arial; font-size:24.5px; color:#000000">INTRODUCTION</span>
    </div>

    <div class="pos" id="_737:3442" style="top:3442;left:737">
      <span id="_19.1" style="font-style:italic; font-family:Times New Roman; font-size:19.1px; color:#000000">1</span>
    </div>
  </div>
</body>
</html>
javascripthtmlcsspdfphantomjs

Answer №1

By utilizing position:absolute, the PDF content will be displayed according to the specific absolute positioning of the elements. However, if you decide to remove position:absolute without adjusting the top and left properties of the elements to zero, they will be rendered relatively instead, resulting in unwanted spacing between the pages.

One potential solution is to:

@media print {
    .pos { position: relative; z-index: 0; left: 0px; top: 0px }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

I am currently working on a project to develop an application that allows users to be added to a MongoDb database and have their names displayed in a dropdown menu. While creating the form, I encountered two issues - one related to the closing tag error a ...

javascriptreactjs

Implementing a clickable image using an anchor tag in JavaScript

I need to enhance my image tag in JQuery by adding an anchor tag alongside it. How can I accomplish this using JavaScript? Here is what I attempted: var imgg = document.createElement("img"); imgg.className='myclass'; $( ".myclass" ).add( "<a ...

javascriptjqueryhtml

Performance problems arising from use of Tailwind CSS drop-shadow class

Lately, I've been struggling to pinpoint the root cause of a drastic FPS drop in my application. The issue arises after using the app for some time, leading to a performance plunge down to around 10FPS. After investigating, I discovered that eliminati ...

cssvue.jstailwind-css

Dealing with uncaught promise rejection while using the 'opn' npm package in Docker

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3 I encountered this error while trying to open links using a module within a Docker container. The code functioned fine on my local machine without D ...

javascriptnode.jsdockernpmpromise

How can one authenticate an express session when sending a POST request?

Is there a way to verify that a user is sending a post request in order to prevent unauthorized posting to a URL? I am currently using express-session for this purpose, but I'm open to exploring alternative methods as well. I attempted to implement t ...

javascriptnode.jsexpresspostexpress-session

Filling in form fields with data from the database based on the option selected from the dropdown menu

I'm trying to create a dynamic form where selecting a name from a drop-down menu will automatically populate the rest of the fields with that person's information without refreshing the page. I believe I need to use an onChange function in JavaSc ...

javascriptphpajax

I need to know how to create a patch request in Vue.js and simultaneously modify the marks input for specific individuals by using v-model

Hello there, I am currently developing a student assessment input form using vuejs, express, and mongoDB. The backend API is complete and functioning properly when tested with postman. Here is the code: // UPDATE MARKS router.patch('/:studentId' ...

javascriptexpressvue.js

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Encountering an issue with displaying data fetched from omdbapi, receiving [object Object] instead

Everything is working perfectly in my code except for the mysterious appearance of [object Object] whenever I perform a search. I've combed through my code multiple times, but I just can't seem to locate the source of this issue. It would be grea ...

javascriptjqueryajaxapixmlhttprequest

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

javascripthtmlcssinternet-explorermicrosoft-edge

Using an arrow function in Aurelia to read a json file

I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue. In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collect ...

javascriptjsonlambdaaurelia

What is the reason behind the functionality of invalid HTML?

As someone diving into the world of web programming, I have a burning question: Why does invalid HTML seem to work just fine sometimes? And why is it that HTML validation isn't always necessary? <html> <body> </html> It's intr ...

html

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

javascripthtmlajaxdatatables

Is it preferable to include in the global scope or the local scope?

When it comes to requiring a node module, what is the best approach? Should one declare the module in the global scope for accuracy and clarity, or does declaring it in the local scope make more sense? Consider the following examples: Global: let dns = r ...

javascriptnode.jsmodulescope

Unable to show the table row color using Angular in Internet Explorer

I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...

cssangularjsinternet-explorerhtml-table

Utilizing a Json.Net object within an Ajax request

Is there a way to pass a .Net object in an Ajax call using the Json.Net javascript library instead of json2.js? You can find more information on passing complex types via Ajax calls at this link: I am familiar with how to serialize and deserialize object ...

javascriptjqueryajaxjsonjson.net

Data bindings encapsulated within nested curly braces

I am currently utilizing Angular2 in my application. Within my html file, I have a *ngFor loop set up like so: <div *ngFor="let element of array"> {{element.id}} </div> Next, I have an array containing objects structured as follows: some ...

htmlangulardata-binding

Implementing PHP code in HTML file

Is there a way to utilize PHP in order to make changes to an HTML file on a website? To clarify, I am looking to create a PHP file with input boxes that can append to a list in an HTML file. For example, the admin.php file will update the index.html file ...

phphtml

Connecting two divs with lines in Angular can be achieved by using SVG elements such as

* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...

htmlcssangulartypescript

Enable the input field once the checkbox has been marked

Here is a checkbox example: <div class="form-group"> <input type="checkbox" id="examination" class="form-control" name="exam" placeholder="Enter Title"> <label>Enable Exam</label> </div> Additionally, I have a disabled inpu ...

javascripthtmlajax