Different Invoice Layout in Preview, Print, PDF

[lmns]

Using the standard built-in plain invoice template, I slightly changed the theme to have a line break in the company details and the business identifier to be included as well. The invoice preview reflects this change correctly, but the print and PDF layout do not. Here, the line break is not included. I tried to find the possible different instances of the theme files, but in the GUI, there’s just the code box for editing the theme.

The code looks like this:

            <table style="margin-bottom: 20px"><tr>
                <td>
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div><br></div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div><br></div>
                    <div>{{ recipient.identifier | newline_to_br }}</div>
                </td>

I read most of the guide and I also browsed through the forum, but I did not find a similar description/solution.

Thanks.

[Brucanna]

Not knowing HTML but it appears that maybe your “br” should be “br/”

Read this topic which relates to Emails

Request: Replace new lines with HTML <br/> tag when sending emails

I am following on from this 7-month old conversation: I just ran into this exact issue and was about to post a bug report. So instead, I’d probably request a feature: Replace all line breaks in an email with HTML <br/> tag. (if using HTML sending format) In PHP, this is handled by the function nl2br, because it’s a common requirement to perform exactly this task. For Manager to do this, it would prevent confusion from users like @Paul_Joubert (the author of that conversation) … and would…

[Tut]

I think your problem is that you have your <br> tags enclosed in <div> tags. Since there is no content, the PDF generator ignores it. Try just placing the <br> tags in front of the following <div>

[lmns]

Thanks for the quick reply. Tut’s response about ‘no content’ put me on the right track.

It’s not the “br” tag that is in the wrong place. Any position is handled the same, before/between/after “div”. Brucanna’s suggestion of using xhtml tag “br/” also does not solve it.

However, since the PDF generator seems to skip empty lines, I included a forced space tag (“&nbsp”) to see if that would be treated as ‘content’, which it does. This solved the problem.

Code now looks like:

                <td>
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div><br>&nbsp;</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div><br>&nbsp;</div>
                    <div>{{ recipient.identifier | newline_to_br }}</div>
                </td>

Thanks.

[ShaneAU]

@Brucanna

Not knowing HTML but it appears that maybe your “br” should be “br/”

The difference between the two is that <br> is more commonly-accepted, whereas <br/> is the correct fully XHTML syntax to use, if you’re strictly following the requirements. All modern browsers will accept the more relaxed version though (<br>).

That’s your random HTML fact of the day

[WTS]

I am clueless with regards to Liquid. My PC crashed so I had to download Manager again. When I restored my company from the backup, the format for my invoices in PDF/Print changed. Viewing the invoice in Manager is fine
Can someone please help me correct the settings to fix this issue?

[Ealfardan]

You’re posting to a 4 years old thread that’s been resolved.

Aside from that:

• What OS are you using?
• What version are you using?
• Are you using a custom theme?
• In case this is a side effect with the PDF button, please note that the PDF button is being phased out.

[itmoto]

You may need to enter line breaks in your business details if the images you provided are from before then after updating.

[lmns]

Under Settings in Themes, you will see a list of templates/themes that are available. You will get a preview of the elements that are defined in the theme. When clicking the Edit button, you will be presented with the code of that template/theme. I am no expert on all of this, but the difference between your screenshots looks a lot like a column width issue.

It looks like you have 3 columns (customer, invoice, business). It may be that your logo/image “pushes” the other columns to the left (look for code similar to ). Or it may be that the column size is not defined and this is an auto-sizing thing (look for code similar to ).

Maybe this helps with identifying what the problem is.