CODEWITHSUNDEEP
htmlcsspdf
Dan
Dan

Reputation: 1246

Multiple CSS absolute positioned elements in HTML pdf

I'm creating a PDF from HTML (using wicked_pdf) with multiple envelopes for printing. Each page(envelope) can have elements positioned based on the users requirements. The trouble is getting the CSS right such that page-break-after and absolute positioned elements on each page are displayed correctly.

Here's a simplified example:

  <div class="page" style="position:relative;background:red;min-height:1px;">
    <div style="position:absolute;top:50px;left:0">
      Address Alpha
    </div>
    <div style="position:absolute;top:80px;left:0">
      Beta
    </div>
  </div>
  <div style="page-break-after: always;"></div>
  <div class="page" style="position:relative;background:green;min-height:1px;">
    <div style="position:absolute;top:50px;left:0">
      Address Gamma
    </div>
    <div style="position:absolute;top:80px;left:0">
      Delta
    </div>
  </div>

This produces the following output as seen in the image:

PDF envelope example

The text "Address Alpha" should be 50px from the top of page one although it appears on page two. How can I have multiple absolute positioned blocks on each page?

Upvotes: 1

Views: 1933

Answers (1)

Jayababu
Jayababu

Reputation: 1621

For the class page you are giving only min-height.I suggest to give fixed height and width so that div with class page wont overlap.I think it will solve your problem.

Upvotes: 1

Related Questions