Invoice printing: improved layout

amberbb · Sun Dec 30, 2012 12:32 am

I don't know if you have changed something recently or whether we are noticing this for the first time, but our invoices are too wide to print on A4 LANDSCAPE even.

We realise that we can change some settings by using custom CSS at
Properties> Advanced> Invoice Custom CSS
and there we currently have this set:

body {text-align: left; font-size: 16px;}
#invoicepropname{position: absolute; top: 13px; left: 180px; font-size: 28px;}
#invoiceaddress{position: absolute; top: 30px; left: 140px; font-size: 18px; padding-bottom: 120px;}
#invoiceguestname{position: absolute; top: 180px; left: 60px; }
#invoiceguestaddress{position: absolute; top: 200px; left: 60px;}
#invoicenote{position: absolute; top: 310px; left: 60px; font-size: 20px; font-style: italic;}
#invoiceroomname{position: absolute; top: 430px; left: 60px; }
#invoicereference{position: absolute; top: 430px; left: 260px; }
#invoicetable{position: absolute; top: 460px; left: 60px; margin-left:auto; margin-right:auto;}
#invoicecomment{position: absolute; top: 800px; left: 60px;}
#invoiceprinttime{position: absolute; top: 180px; left: 650px; font-size: 14px; font-style: italic;}

Now we could reduce the font size and move the left hand start position closer to the left hand margin, but we do prefer the start position where it is so the printed customer name and address is visible through a standard, window envelope see-through panel.

We have the following suggestions to make:

1) remove a lot of the right hand padding of all columns - especially the description column
2) change the column heading name from "Quantity" to "No." and halve that column's width to allow 4 digits only
3) allow the description in a row to "wrap" to a second and third line (of the same row) when it becomes too long

Most people will probably want to print portrait orientation on A4 paper and I think that thought should be given as to how best to achieve this...

: Too wide - even for landscape A4!; Invoice46768Sullivan20121228-1.png (37.89 KiB) Viewed 3702 times

Annette · Wed Jan 02, 2013 6:32 pm

Our default css does exactly what you want. It is designed to adjust to the required paper size (e.g. A4 portrait). The description items wrap if there is not enough space. Something in your custom css must upset this. I suggest removing the custom css and adding it step by step until you find what causes the problem.

amberbb · Wed Jan 02, 2013 11:17 pm

Annette wrote:Our default css does exactly what you want. It is designed to adjust to the required paper size (e.g. A4 portrait). The description items wrap if there is not enough space. Something in your custom css must upset this. I suggest removing the custom css and adding it step by step until you find what causes the problem.

I'm afraid your analysis only seems to be partially correct here, Annette.

If we just use this CSS

body {text-align: left; font-size: 14px;}
#invoicepropname{position: absolute; top: 13px; left: 180px; font-size: 28px;}
#invoiceaddress{position: absolute; top: 30px; left: 140px; font-size: 18px; padding-bottom: 120px;}
#invoiceguestname{position: absolute; top: 220px; left: 60px; font-size: 16px;}
#invoiceguestaddress{position: absolute; top: 250px; left: 60px; font-size: 16px;}
#invoicenote{position: absolute; top: 360px; left: 60px; font-size: 20px; font-style: italic;}
#invoiceroomname{position: absolute; top: 530px; left: 60px; font-size: 16px;}
#invoicereference{position: absolute; top: 530px; left: 260px; font-size: 16px;}
#invoicecomment{position: absolute; top: 1200px; left: 60px; font-size: 16px;}
#invoiceprinttime{position: absolute; top: 230px; left: 650px; font-size: 14px; font-style: italic;}

a very long description in a row does indeed "wrap" to a second line (of the same row) when it becomes too long and (although the invoice table is printing right on the left hand paper margin (rather than allowing any margin at all - and, of course, not our desired left margin of 60px) this TOO WIDE default width of table is then positioned far enough to the left not to "fall off" the right hand paper edge).

However, when we add back in as the last line of our custom CSS either
#invoicetable{position: absolute; top: 460px; left: 60px; }
or
#invoicetable{position: absolute; top: 460px; left: 60px; margin-left:auto;}
or
or#invoicetable{position: absolute; top: 460px; left: 60px; margin-left:auto; margin-right:auto;}

then, although the very long description in a row does indeed continue to "wrap" to a second line (of the same row) when it becomes too long, with any of these added lines of CSS (to position the table in the middle of the page vertically and with a bit of a margin of 60px), three of the last column of digits falls off the right hand margin of A4 paper.

Can you help us out here, Annette?

Can you either a) tell us custom CSS to reduce the width of the table generated
or
b) ask Mark to reduce the default width of the generated invoice table by, say, 80 - 130px?

I have left a test invoice for you to try yourself at Booking No: 46768 for Richard Ramsden....

Thu Jan 03, 2013 11:32 am

I looked at your sample invoice.

1) There are problems with the text appearing on top of other text but that is a different problem I suspect caused by the absolute positioning in your CSS.

2) On my computer and Annette's the invoice prints with the table fitting on an A4 portrait page. The table should actually resize it's width to whatever size paper you print onto. If it is not doing this there may be something specific to your printer driver, do you happen to have a new printer?

The default invoice has a 20px padding on all sides of the page (plus whatever your printer driver may add). If you need to increase this padding for your printer try the following to the custom css, changing the values to suit.

body {
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;
}

Thu Jan 03, 2013 11:41 am

amberbb wrote: However, when we add back in as the last line of our custom CSS either
#invoicetable{position: absolute; top: 460px; left: 60px; }
or
#invoicetable{position: absolute; top: 460px; left: 60px; margin-left:auto;}
or
or#invoicetable{position: absolute; top: 460px; left: 60px; margin-left:auto; margin-right:auto;}

then, although the very long description in a row does indeed continue to "wrap" to a second line (of the same row) when it becomes too long, with any of these added lines of CSS (to position the table in the middle of the page vertically and with a bit of a margin of 60px), three of the last column of digits falls off the right hand margin of A4 paper.

The problem is the "position:absolute" in the CSS. The table normally sizes itself to fit the width of the page less a little padding. It is still doing that but because you are shifting its position to the right it is falling off the right side of the page. Padding and margins are not going to work with absolute positioning.

Fortunately the solution is pretty simple, add a width parameter to set the table width to suit your page size, for example here I set it to 400px:
#invoicetable{position: absolute; top: 460px; left: 60px; width: 400px;}

amberbb · Thu Jan 03, 2013 9:39 pm

That width parameter has cracked it, Mark!

Thanks!

I hadn't changed my printer or my driver and everything is looking good now with specifying widths by using this css:

Code: Select all

body {text-align: left; font-size: 16px;}
#invoicepropname{position: absolute; top: 13px; left: 180px; font-size: 28px;}
#invoiceaddress{position: absolute; top: 30px; left: 140px; font-size: 18px; padding-bottom: 120px;}
#invoiceguestname{position: absolute; top: 220px; left: 60px; font-size: 16px;}
#invoiceguestaddress{position: absolute; top: 240px; left: 60px; font-size: 16px;}
#invoicenote{position: absolute; top: 360px; left: 60px; font-size: 18px; font-style: italic; width: 660px;}
#invoiceroomname{position: absolute; top: 480px; left: 60px; font-size: 16px;}
#invoicereference{position: absolute; top: 480px; left: 300px; font-size: 16px;}
#invoicecomment{position: absolute; top: 940px; left: 60px; font-size: 14px; width: 660px;}
#invoiceprinttime{position: absolute; top: 230px; left: 540px; font-size: 14px; font-style: italic;}
#invoicetable{position: absolute; top: 510px; left: 60px; width: 660px;}