Invoice PDF view scrambled, web-view is fine

I am using the Vista template, and I’ve slightly tweaked the CSS (font, colours, nothing major).

It looks fine in my browser, but when I download the PDF all the formatting is lost - some elements are missing and lots of text is on top of other text.

Any idea how I can fix this?

Unfortuantely the PDF converter does not faithfully reproduce the CSS in the same way your browser does. We’ve learn’t how to work around some of these quirks… the PDF version can only recognise very basic CSS. What sort of changes are you making in the CSS editor? Have you tried removing them one by one to see exactly which class is causing the formatting problems?

I’ve managed to step through the changes and fix it so that the text is all where it’s supposed to be. Can’t get the thick blue line on the side to display unfortunately.

Do you know how I can anchor the footer text to the bottom of the page? At the moment, if my invoice is only a few lines then there is a lot of white space at the bottom after my footer.

noticed problem is with vista layout only, any other layout works fine on pdf print

Those thick borders unfortunately don’t appear on the PDF version, we tried to retain this but the PDF converter always insisted on having it’s own margin and the border just ended up looking weird.

Regarding the footer placement, if you go into Sales >> Invoice Customisation and click the footer section.

If you add some text in the lower box this will be appended to the footer of each PDF page (it will not appear on the html view). The other footer box just floats the text at the bottom of the main content.

1 Like

Just an idea to try, perhaps check two things on inbuilt PDF printer properties

  1. background colours printing enabled?
  2. .invoice-custom-block-1 is actually in print area of pdf printer

Ah perfect, thanks for that.

It’s a shame about the borders, I’m sure I can live without them though.

This topic was automatically closed after 7 days. New replies are no longer allowed.