How to make invoices always full page?

[TonyB]

Our invoices tend to have just one product item, meaning that the generated invoice only uses about half a page of A4, which looks rather scruffy. I prefer invoices to always be full page. Is there any way to fix this, perhaps using CSS?

[Glenn]

Adding a CSS class like this will force the page to adopt a minimum height:

 .nested-invoice-container{
    min-height:700px;   
 }

A height of around 700px should result in an aspect ratio similar to that of an A4 piece of paper.

[TonyB]

@Glenn

.nested-invoice-container{
min-height:700px;
}

Thanks Glen. Unfortunately that hasn’t made any difference, even using the !important tag. Just to clarify, I’m referring to invoices generated in pdf.

It would be great to have a CSS sub forum so that people could pass on their invoice design tips. Apologies if there is one already and I’ve missed it.

[Glenn]

OK but I’m not sure I understand the following:

@TonyB

I prefer invoices to always be full page

The PDF document is A4 size, do you mean you want all the content to be shifted down a few centimeters?

A CSS category would be handy, as we seem to get a few of these CSS related questions and it’s good to keep them all in one place.

EDIT:

New sub category ‘Invoice CSS’ created!

[TonyB]

Thanks for creating the CSS sub category, I’m sure others will find it useful.

Regarding the invoice layout issue, perhaps we’re at cross purposes so I’ll try again. I find that when I create an invoice (exporting to PDF) the layout only uses about half the A4 page when I just have one sale item.

I would like the invoice to cover the whole page so that the ‘item/description’ box is much longer and the ‘balance due’ box is right at the bottom of the page. This is how other invoice software packages produce their invoices and I think it looks better to use the whole page rather than have 50% of it as empty space. Please see the image below to show what I mean.

[Glenn]

I’m sure this is possible using the min-height property on the relevant elements. You can use Chrome debugger (F12) to reveal the class names, then set the relevant CSS attributes to get the desired output. Probably some trial and error involved.

One other thing… most invoices I’ve seen use the Payment Terms and Notes fields to outline the various payment options, terms and delivery arrangements. I think this would really improve the general appearance as well as conveying useful information to the client.

[TonyB]

Thanks Glen. I’ll play around with it.