Logo is moving from left to right in header on subpages

Hey guys,

I am new to InvoiceNinja. I was searching for a simple peace of software for surprise creating invoices. InvoiceNinja is the tool I was looking for. Nice!

After playing around with the invoice design, I finished with my desired layout. Now I am writing an invoice with a lot of items, so that my invoice consists of four pages.
I want to have on every single page my logo in the header. Thats no prob. On page one the logo is on the right place where I want it.
On page two it moves 30px or so to the right. On page three 30px or so further to the right and so on. Can somebody illuminate me, why the program behaves like that?

I am using the self hosted version of InvoiceNinja.

Thanks in advance!
Cheers,

Chris

Are you using a standard or a customized design? It may be related the settings on the ‘Margins’ tab.

If you’re using a custom design I’d suggest checking if the problems exists with a standard design.

I am using a customized design. That are my settings on the ‘Margins’ tab:

array		[4]
0	:	0
1	:	180
2	:	0
3	:	200

So the 0 is for left margin and 2 for the right margin, right?
I based my customized design on the “bold”-template. So I only changed the margins a bit and told the template to insert a footer and a header on every page.

Hey! I figured out, that the issue is here in “header”-tab:

[
  {
    "canvas": [
      {
        "type": "line",
        "x1": 0,
        "y1": 0,
        "x2": 600,
        "y2": 0,
        "lineWidth": 200,
        "lineColor": "$secondaryColor:#fff"
      }
    ],
    "width": 10
  },
  {
    "columns": [
      {
        "image": "$accountLogo",
        "fit": [
          100,
          250
        ],
        "margin": [
          35,
          10,
          0,
          0
        ]
      },

where margin is 35. I don’t know why, but on every subpage the program adds 35 on the left margin. Only here. Not on the top margin, nor on bottom… weird! Where is my mistake?

I’m not sure, I’ll take a look tomorrow.

I assume you’re seeing the same problem when using the standard Bold design.

I haven’t been able to replicate the problem with the standard Bold design.

The top of the table headers are cutoff on secondary pages, I’m able to fix it by increasing the page margin top from 80 to 100.

I can replicate the problem with the standard Bold design. I just changed the first margin value for the logo, saved it and went to my invoices. There I have a few demo invoices. Every invoice shows the same behavior. Since page two the logo is moving the amount of the margin value from left to right.

I have the selfhosted version of your software. I cannot see any failures in installation. What now? I may give you a login, because I haven’t it running locally but on my webserver.

If the problem occurs when setting the margin can you simply leave the default margin instead?

Okay, I tried that. I have now the standard bold design an my logo is moving anyways. On friday there was no problem with the default layouts! I am going nuts. But thanks for your great efforts!
Should I re-setup the program?! Would there the possibilities to import/export layouts?
BTW: I have often something like that:

Parsing/Rendering failure

(Directlink to the image: Rendering/Parsing failure)
But when I am exporting/saving the invoice, everything is okay within the pdf.

I’m not sure, you shouldn’t have to set it up again. You can run the following SQL query to get the custom design:

select custom_design from accounts;

I’ve also sometimes seen garbled text, if you have ‘PDF Viewer’ enabled on /settings/account_management disabling it may help.

Also (sometimes) I see the garbled text in invoices, clicking/refreshing them 1-2-3-4 times solves the problem (clients don’t tend to do this).

The problem occures random. The problem occures with all PHP versions tested (5.9/7.0). The problem occures using either MySQL or MariaDB. The database collate is set to utf8_general_ci. When downloading the PDF, the problem never occures (so far). Internal PDF viewer is set to be used.

I already saw this problem on 2 unedited layouts, first saw it occure on version 2.9.3 when testing out. (Invoice Ninja is still not yet in production here, testing for ± 2 months, white labeled).

What I understand is not to use the internal PDF viewer for now till there is a bug fix?

If you’re using Chrome we recommend disabling ‘PDF Viewer’ and using the browser’s native viewer instead.

I understand that, but I can’t know wich browser clients use to go to their dashboard, view and/or pay their invoice from.

I don’t mind using whatever browser or whatever setting in IN for myself, but for the client view it should work on all browsers with whatever setting is used. If the internal PDF viewer spits out garbled text from time to time, I don’t want the client to see such an invoice, because it makes our IT company look like we have problems with our IT :slight_smile:

Maybe some sort of check wich browser the client is using and use a setting that is best suited for their browser type?

I disabled internal PDF viewer for now, just mentioning it actually should be fixed (or wurst case, the option using internal viewer being removed).

I guess no company would like to let a client see an official document wich is garbled, it just plain unprofessional.

Agreed, it looks terrible. We attempt to select the best choice… On Chrome and Firefox we use the native renderer (more stable), on other browsers we use PDFjs (less stable).

Was there a reason you had enabled the ‘PDF Viewer’ setting?

Because of the reason the invoice automatically downloads on eg. my own Android device, using Chrome app, and is not shown in the portal when not using internal PDF viewer. I realy like the PDF to be displayed AND the option (offcourse) to download the invoice.

At this point, this is not possible unless I agree to some garbled invoices shown from time to time to a customer :slight_smile:

Hope this ‘issue’ gets a bit of attention, most people view on mobile devices these days.

I guess some javascript that detects device / browser / … could “easely” fix this, offcourse if the PDFjs gets better or another option will be implemented in the futrure doing the PDF parsing.

In our next version we’re handling mobile differently which should help with Chrome on Android.

We’ll also look into updating to the latest version of PDFjs.

Hey Hillel,

its me again. I experimented a bit with different styles, but with same result. If I give a margin to my logo in the header of my documents, the margin adds its value on the subpages. Even if I set the left margin of the logo to zero and set a left margin for the whole header, the logo moves from left to right on the subpages. I got my styling for you for reconnaissance of the problem:

  1. Content ```

    [
    {
    “columns”: [
    {
    “width”: 380,
    “stack”: [
    {
    “text”: “$yourInvoiceLabelUC”,
    “style”: “yourInvoice”
    },
    “$clientDetails”
    ],
    “margin”: [
    60,
    10,
    0,
    10
    ]
    },
    {
    “canvas”: [
    {
    “type”: “rect”,
    “x”: 0,
    “y”: 0,
    “w”: 225,
    “h”: “$invoiceDetailsHeight”,
    “r”: 0,
    “lineWidth”: 1,
    “color”: “$primaryColor:#B6E148
    }
    ],
    “width”: 10,
    “margin”: [
    -10,
    10,
    0,
    10
    ]
    },
    {
    “table”: {
    “body”: “$invoiceDetails”
    },
    “layout”: “noBorders”,
    “margin”: [
    0,
    20,
    0,
    0
    ]
    }
    ]
    },
    {
    “style”: “invoiceLineItemsTable”,
    “table”: {
    “headerRows”: 1,
    “widths”: [
    “22%”,
    ",
    “14%”,
    “$quantityWidth”,
    “$taxWidth”,
    “22%”
    ],
    “body”: “$invoiceLineItems”
    },
    “layout”: {
    “hLineWidth”: “$none”,
    “vLineWidth”: “$none”,
    “paddingLeft”: “$amount:8”,
    “paddingRight”: “$amount:8”,
    “paddingTop”: “$amount:14”,
    “paddingBottom”: “$amount:14”
    }
    },
    {
    “columns”: [
    {
    “width”: 46,
    “text”: " "
    },
    “$notesAndTerms”,
    {
    “table”: {
    “widths”: [
    "
    ”,
    “40%”
    ],
    “body”: “$subtotals”
    },
    “layout”: {
    “hLineWidth”: “$none”,
    “vLineWidth”: “$none”,
    “paddingLeft”: “$amount:8”,
    “paddingRight”: “$amount:8”,
    “paddingTop”: “$amount:4”,
    “paddingBottom”: “$amount:4”
    }
    }
    ]
    },
    {
    “stack”: [
    “$invoiceDocuments”
    ],
    “style”: “invoiceDocuments”
    }
    ]

    
    
    </li>
    	<li><strong>Styles</strong>
    

    {
    “primaryColor”: {
    “color”: “$primaryColor:#B6E148
    },
    “accountName”: {
    “bold”: true,
    “margin”: [
    4,
    2,
    4,
    1
    ],
    “color”: “$primaryColor:#B6E148
    },
    “accountDetails”: {
    “margin”: [
    4,
    2,
    4,
    1
    ],
    “color”: “#FFFFFF
    },
    “accountAddress”: {
    “margin”: [
    4,
    2,
    4,
    1
    ],
    “color”: “#FFFFFF
    },
    “clientDetails”: {
    “margin”: [
    0,
    2,
    0,
    1
    ]
    },
    “odd”: {
    “fillColor”: “#ebebeb”,
    “margin”: [
    0,
    0,
    0,
    0
    ]
    },
    “productKey”: {
    “color”: “$primaryColor:#292526”,
    “margin”: [
    40,
    0,
    0,
    0
    ],
    “bold”: false
    },
    “balanceDueLabel”: {
    “fontSize”: “$fontSizeLargest”,
    “bold”: true
    },
    “balanceDue”: {
    “fontSize”: “$fontSizeLargest”,
    “color”: “$primaryColor:#292526”,
    “bold”: true
    },
    “invoiceDetails”: {
    “color”: “#ffffff
    },
    “invoiceNumber”: {
    “bold”: true
    },
    “itemTableHeader”: {
    “margin”: [
    40,
    0,
    0,
    0
    ]
    },
    “totalTableHeader”: {
    “margin”: [
    0,
    0,
    40,
    0
    ]
    },
    “tableHeader”: {
    “fontSize”: 12,
    “bold”: true
    },
    “costTableHeader”: {
    “alignment”: “right”
    },
    “qtyTableHeader”: {
    “alignment”: “right”
    },
    “taxTableHeader”: {
    “alignment”: “right”
    },
    “lineTotalTableHeader”: {
    “alignment”: “right”,
    “margin”: [
    0,
    0,
    40,
    0
    ]
    },
    “yourInvoice”: {
    “font”: “$headerFont”,
    “bold”: true,
    “fontSize”: 14,
    “color”: “$primaryColor:#292526”,
    “margin”: [
    0,
    0,
    0,
    8
    ]
    },
    “invoiceLineItemsTable”: {
    “margin”: [
    0,
    26,
    0,
    16
    ]
    },
    “clientName”: {
    “bold”: true
    },
    “cost”: {
    “alignment”: “right”
    },
    “quantity”: {
    “alignment”: “right”
    },
    “tax”: {
    “alignment”: “right”
    },
    “lineTotal”: {
    “alignment”: “right”,
    “margin”: [
    0,
    0,
    40,
    0
    ]
    },
    “subtotals”: {
    “alignment”: “right”,
    “margin”: [
    0,
    0,
    40,
    0
    ]
    },
    “termsLabel”: {
    “bold”: true,
    “margin”: [
    0,
    0,
    0,
    4
    ]
    },
    “header”: {
    “font”: “$headerFont”,
    “fontSize”: “$fontSizeLargest”,
    “bold”: true
    },
    “subheader”: {
    “font”: “$headerFont”,
    “fontSize”: “$fontSizeLarger”
    },
    “help”: {
    “fontSize”: “$fontSizeSmaller”,
    “color”: “#737373
    },
    “invoiceDocuments”: {
    “margin”: [
    47,
    0,
    47,
    0
    ]
    },
    “invoiceDocument”: {
    “margin”: [
    0,
    10,
    0,
    10
    ]
    }
    }

    
    </li>
    	<li><strong>Standards</strong>
    

    {
    “font”: “$bodyFont”,
    “fontSize”: “$fontSize”,
    “margin”: [
    8,
    4,
    8,
    4
    ]
    }

    </li>
    	<li><strong>Margins</strong>
    

    [
    0,
    180,
    0,
    200
    ]

    
    </li>
    	<li><strong>Header</strong>
    

    [
    {
    “canvas”: [
    {
    “type”: “line”,
    “x1”: 0,
    “y1”: 0,
    “x2”: 600,
    “y2”: 0,
    “lineWidth”: 200,
    “lineColor”: “$secondaryColor:#fff
    }
    ],
    “width”: 10
    },
    {
    “columns”: [
    {
    “image”: “$accountLogo”,
    “fit”: [
    “”,
    “”
    ],
    “margin”: [
    0,
    20,
    0,
    0
    ]
    },
    {
    “text”: [
    {
    “text”: “My, a bit longer, enterprise name”,
    “bold”: true,
    “fontSize”: “20”
    },
    {
    “text”: “\nMy Name”
    }
    ],
    “color”: “#818181”,
    “fontSize”: “18”,
    “margin”: [
    -265,
    28,
    0,
    0
    ],
    “width”: 180
    }
    ],
    “margin”: [
    35,
    0,
    0,
    0
    ]
    }
    ]

    
    </li>
    	<li><strong>Footer</strong>
    

    [
    {
    “canvas”: [
    {
    “type”: “line”,
    “x1”: 0,
    “y1”: 120,
    “x2”: 600,
    “y2”: 120,
    “lineWidth”: 160,
    “lineColor”: “$secondaryColor:#292526
    }
    ]
    },
    {
    “columns”: [
    {
    “stack”: [
    {
    “text”: “Address\n\n”,
    “bold”: true,
    “fontSize”: “$fontSizeLargest”,
    “color”: “#fff”,
    “margin”: [
    5,
    8,
    0,
    0
    ]
    },
    {
    “stack”: “$accountAddress”
    }
    ],
    “alignment”: “left”,
    “width”: 250,
    “margin”: [
    40,
    -15,
    40,
    0
    ]
    },
    {
    “text”: [
    {
    “text”: “Contact\n\n”,
    “fontSize”: “$fontSizeLargest”,
    “bold”: true
    },
    {
    “text”: "Fon: ",
    “bold”: true
    },
    {
    “text”: “0123 45 67 891”
    },
    {
    “text”: "\nHotline: ",
    “bold”: true
    },
    {
    “text”: “030 678 908 - 12”
    },
    {
    “text”: "\nMail: ",
    “bold”: true
    },
    {
    “text”: “info@myenterprise.de\n info@myseconddomain.de
    },
    {
    “text”: "\n\n24/7 Emergency: ",
    “bold”: true
    },
    {
    “text”: “(billable)”
    },
    {
    “text”: “\n030 12 34 56 78”
    }
    ],
    “margin”: [
    10,
    -40,
    0,
    0
    ],
    “alignment”: “left”,
    “color”: “#FFFFFF”,
    “width”: 120
    },
    {
    “text”: [
    {
    “text”: “Bank details\n\n”,
    “fontSize”: “$fontSizeLargest”,
    “bold”: true
    },
    {
    “text”: “$invoiceFooter”
    },
    {
    “text”: “\n\nTax number:”,
    “bold”: true
    },
    {
    “text”: “\n123/456/78912”
    },
    {
    “text”: “\n tax authorities”
    }
    ],
    “margin”: [
    40,
    -40,
    40,
    0
    ],
    “alignment”: “left”,
    “color”: “#FFFFFF
    }
    ]
    }
    ]

    
    </li>
    </ol>
    
    Hope you can see my problem. I need really your help. I like your software, but I have a lot invoices with more than two pages.

I’m not sure, it seems to work for me.

Note: I needed to set values for “$accountLogo”, “fit”: ["",""], in the header.

Thanks first of all, that you tried it! Pretty good. If we get this running, I’ll buy your program and tell my partners! =)

Soooo. I I tried "fit:["",""] as well as "fit:[,] or "fit:["120","120"] and last "fit:[120,120]. All with the same result.
May I try my layout on an online demo account?! I think my installation lags or so. I can give you my login via pm for my installation if you want a look.
I am going nuts with this problem. I love InvoiceNinja, but I cannot use it with this problem. =( I want it working! :smiley:

If you can pinpoint the problem we’ll try to fix it.

Maybe try with a different image file?