# Problems with invoice template

**URL:** <https://forum.manager.io/t/problems-with-invoice-template/1256>\
**Category:** Uncategorized\
**Created:** [July 12, 2014, 12:09am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256 "2014-07-12T00:09:56Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [July 12, 2014, 12:09am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/1 "2014-07-12T00:09:57Z")

</div>

I had some issues after creating my invoice template these are the following;

1. Invoice number prefix is not displaying on the invoice template. Only single invoice number is printing.
2. Terms & Payment Advice were not printing on the invoice template.
3. I am using an A4 page so notes should be printed at the bottom of the page note just after the total.
4. Most importantly when I create a invoice having long list of items then the items list is printing from the top of the second A4 sheet but it should first print the customer information etc on the second sheet then the list of items.
5. For multiple pages (A4) it should print the page number.

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 12, 2014, 9:20am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/2 "2014-07-12T09:20:41Z")

</div>

1. This is on purpose, invoice number prefix will be variable for in-built template only. Since you are using custom template, you can simply hard-code prefix in custom template.
2. See point 1.
3. You can use CSS attribute “min-height” so you set minimal height of the container that shows line items. This way even if invoice is shorter, the container will not “shrink” and footer of the invoice will come to the bottom. You need to test how many pixels “min-height” should be set to. Another way would be to use fixed position trick - see [css - How to use HTML to print header and footer on every printed page of a document? - Stack Overflow](http://stackoverflow.com/questions/1360869/html-print-header-footer)
4. This can be handled by wrapping whole invoice template in `<table>` tag where header that should show on each page should be inside `<thead>` tag and footer should be in `<tfoot>` tag. See - [HTML thead tag](http://www.w3schools.com/tags/tag_thead.asp)
5. This can be done using `counter(page)` variable in CSS. See example - [css - Print page numbers on pages when printing html - Stack Overflow](http://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html)

---

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [July 14, 2014, 2:17pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/3 "2014-07-14T14:17:42Z")

</div>

How can I have a heading for either invoice is cash or credit ?

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 14, 2014, 9:15pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/4 "2014-07-14T21:15:53Z")

</div>

Every sales invoice is by default “credit” invoice. There will be ability to print cash receipts which can look like cash invoices if custom template is used.

---

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [July 15, 2014, 3:18pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/5 "2014-07-15T15:18:08Z")

</div>

When I use min- height for the columns of items then it set the height for the cell not the column. how can I set min- height for column.

---

<div class="post-metadata">

**Author:** ![allangibbs](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@allangibbs](https://forum.manager.io/u/allangibbs)\
**Post date:** [July 18, 2014, 5:43am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/6 "2014-07-18T05:43:01Z")

</div>

Is there any way of getting the Quote, Purchase Order and Invoice number  
in large numbers top left under the large letters for those products? At  
the moment the number is very small under the delivery date on the  
right…

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 20, 2014, 6:08pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/7 "2014-07-20T18:08:19Z")

</div>

@Awais, you should post JsFiddle example to demonstrate the issue.

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 20, 2014, 6:09pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/8 "2014-07-20T18:09:46Z")

</div>

@allangibbs, anything is possible but are you familiar with HTML/CSS?

---

<div class="post-metadata">

**Author:** ![allangibbs](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@allangibbs](https://forum.manager.io/u/allangibbs)\
**Post date:** [July 20, 2014, 11:42pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/9 "2014-07-20T23:42:19Z")

</div>

I sort of understand it. I will give it a go anyway. What do I have to do?

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 21, 2014, 5:36pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/10 "2014-07-21T17:36:27Z")

</div>

Do you have any code sample on JsFiddle you can show how far you’ve got in building your HTML template?

You are asking if something is possible. The answer is yes, but I can’t tell you how to do it. You would need to show some code sample first. Then I can tell you what to change where.

---

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [July 27, 2014, 2:21pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/11 "2014-07-27T14:21:19Z")

</div>

Sir Here is the link for my template, I am using a pre-printed A4 paper.

> **[Custom sales invoice - JSFiddle - Code Playground](http://jsfiddle.net/awais_sohail/RuFDL/108/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Every thing is OK for me except these issues;

1. I am using an A4 page so notes should be printed at the bottom of the page note just after the total.
2. When I create a invoice having long list of items then the items list is printing from the top of the second A4 sheet but it should first print the customer information etc on the second sheet then the list of items.
3. For multiple pages (A4) it should print the page number.

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 28, 2014, 11:18am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/12 "2014-07-28T11:18:50Z")

</div>

These are all HTML issues and not particularly specific to Manager. I will try to create one simple template that will show how to address all three issues. But in nutshell:

1. Notes at the bottom

* * *

* * *

**HTML**

```nohighlight
<div id="invoice-footer">
    <div data-bind="foreach: Notes">
        <div data-bind="text: $data"></div>
     </div>
</div>

```

**CSS**

```css
@media print
{
    #invoice-footer {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
    }
}

```

1. Page headers on each page

* * *

* * *

**HTML**

```nohighlight
<table>
    <thead><tr><td><!-- your page header HTML markup here --></tr><td></thead>
    <tbody><tr><td><!-- page content --></tr><td></tbody>
    <tfoot><tr><td><!-- your page footer HTML markup here --></tr><td></tfoot>
</table>

```

1. Page numbers

* * *

* * *

**CSS**

```css
@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [July 30, 2014, 2:20pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/13 "2014-07-30T14:20:32Z")

</div>

Sir did the data bind variable for inventory items name for invoice template is available now? If yes than what is it ? If no, than when it will be available?

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [July 31, 2014, 12:44pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/14 "2014-07-31T12:44:38Z")

</div>

Not yet, I’ll add it next week.

---

<div class="post-metadata">

**Author:** ![Awais](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/awais/32/220_2.png) [@Awais](https://forum.manager.io/u/Awais)\
**Post date:** [August 8, 2014, 1:05pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/15 "2014-08-08T13:05:05Z")

</div>

> [@lubos](#):
>
> 1. Page headers on each page
> 
> HTML
> 
> \<table\>  
> \<thead\>\<tr\>\<td\>\<!-- your page header HTML markup here –\>\</tr\>\<td\>\</thead\>  
> \<tbody\>\<tr\>\<td\>\<!-- page content –\>\</tr\>\<td\>\</tbody\>  
> \<tfoot\>\<tr\>\<td\>\<!-- your page footer HTML markup here –\>\</tr\>\<td\>\</tfoot\>  
> \</table\>

Sir I Tried this but the no. of lines of items were not limited and header were not printed on each page. here is the link for code;

> **[Custom sales invoice - JSFiddle - Code Playground](https://jsfiddle.net/RuFDL/277/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

---

<div class="post-metadata">

**Author:** ![lubos](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/lubos/32/62798_2.png) [@lubos](https://forum.manager.io/u/lubos)\
**Post date:** [August 10, 2014, 8:28am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/16 "2014-08-10T08:28:57Z")

</div>

The HTML you have written is not valid. Tags are not properly closed, some tags are missing completely. There are some HTML validators on the Internet you can check see it for yourself.

I won’t be able to help you to fix the HTML code because this is out of scope but I’ll make it so Manager will accept only valid HTML. This way, once you have valid HTML code that Manager accepts, I will be able to help you again but the HTML code must be valid first.

---

<div class="post-metadata">

**Author:** ![Maria\_April](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/maria_april/32/12381_2.png) [@Maria\_April](https://forum.manager.io/u/Maria_April)\
**Post date:** [April 28, 2018, 6:07am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/18 "2018-04-28T06:07:23Z")

</div>

Hi Lubos. Is there a way to adjust the invoice table headings? Like make it centered, and make sure it doesn’t come in 2 lines when converted to pdf, and set price in “Unit price” to capital P?

---

<div class="post-metadata">

**Author:** ![Tut](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/tut/32/3286_2.png) [@Tut](https://forum.manager.io/u/Tut)\
**Post date:** [April 28, 2018, 6:18am UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/19 "2018-04-28T06:18:18Z")

</div>

> [@Maria\_April](#):
>
> Is there a way to adjust the invoice table headings?

Only with custom themes. Depending on what you want to change, this could be quite difficult.

> [@Maria\_April](#):
>
> Like make it centered

Only with custom themes.

> [@Maria\_April](#):
>
> make sure it doesn’t come in 2 lines when converted to pdf

No. Manager is not what-you-see-is-what-you-get. The screen view is rendered by a browser, either built-in for the desktop edition or whatever browser program you are using if server or cloud. When you generate a PDF, font substitutions occur and layout can change. The same thing can happen, for example, if you generate a PDF of a word processing document.

> [@Maria\_April](#):
>
> set price in “Unit price” to capital P?

Only with a custom theme. Manager’s general style uses initial capital letters except in form titles.

---

<div class="post-metadata">

**Author:** ![Maria\_April](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/maria_april/32/12381_2.png) [@Maria\_April](https://forum.manager.io/u/Maria_April)\
**Post date:** [April 28, 2018, 2:58pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/20 "2018-04-28T14:58:47Z")

</div>

Thanks for the info Tut. Can you help me set it up please? Only with the Unit Price column.

---

<div class="post-metadata">

**Author:** ![Tut](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.manager.io/tut/32/3286_2.png) [@Tut](https://forum.manager.io/u/Tut)\
**Post date:** [April 28, 2018, 6:04pm UTC](https://forum.manager.io/t/problems-with-invoice-template/1256/21 "2018-04-28T18:04:03Z")

</div>

> [@Maria\_April](#):
>
> Can you help me set it up please?

Sorry, no. I’m not a programmer. If you don’t have the skills yourself, hire a local programmer to help. Any competent web designer who can code Liquid should be able to do the job. And this is not a coding forum. Custom themes are your own responsibility.

[Next page](https://forum.manager.io/t/problems-with-invoice-template/1256.md?page=2)