CODEWITHSUNDEEP
cssdompdf
Sebastian Hanke
Sebastian Hanke

Reputation: 11

Dompdf 0.6.2 - pull or push element to bottom page

I need to create invoices with dynamic length content. This works perfect with a table.

My problem is positioning the last element on the last page of the invoice at the bottom of the page. This element should contain the total amount of the invoice, tax of invoice and a variable amount of other text.

So what i need is a variable spacer between the last position of the invoice and the last element on the page containing the summary of the invoice. Is the a possibility to pull or push an element to the bottom of page?

Upvotes: 1

Views: 3490

Answers (2)

Sahib Khan
Sahib Khan

Reputation: 602

Ideally Brian's solution should work, but dompdf will repeat any absolute or fixed positioned element on all pages. So the solution will be to give your content a predefined height and then put your stuff inside. Then add your totals div

.content { height: 720px; }
.total { height 80px; }

Now content will always render till the bottom of the page.

Hope this helps if somebody else still needs it.

Upvotes: 0

BrianS
BrianS

Reputation: 13914

The most straightforward way to accomplish this would be to use a content container with a large bottom margin and an absolutely-positioned element for your last element.

Something like the following:

@page { margin: 50px; }
.content { margin-bottom: 100px; }
.last { position: absolute; bottom: -25px; left: 0px; right: 0px; height: 100px; background-color: green; }
  <div class="content">
    <p>We hold these truths to be self-evident,
  </div>
  <div class="last">
    that all men are created equal
  </div>

I obviously have not used a table here. The main issue with this technique is that column widths will not propagate, if that's something that important to your layout, unless you use known widths.

Upvotes: 4

Related Questions