Invoice content runs off right edge of A4 page (even in exported PDF)

[bcman008]

Invoice content runs off right edge of A4 page since 26.6.7.3638 (still broken on latest version, even in exported PDF, just updated to ) 26.6.17.3647

Since updating to version 26.6.7.3638 every sales invoice I generate has content running off the right edge of the A4 page. This never happened before and I have been using Manager for a good few years now (desktop version).

Importantly, this is not a display, zoom, or printer-driver issue: when I use the PDF button in Manager to export the invoice directly to a PDF file, the exported PDF itself has the same content running off the right edge. So the problem is in the document Manager generates, not in printing or screen rendering.

Details:

• Edition: Desktop
• Version originally affected: 26.6.7.3638
• Still broken on: latest version available as of today (reinstalled fresh)
• OS: [your OS, e.g. Windows 11]
• Theme: Default/built-in theme — Settings > Custom Themes is empty, so no custom theme is installed
• Affected documents: Sales invoices (possibly others, haven’t fully checked)
• Frequency: Happens on every invoice, regardless of content
• Tried:
  • In-app Print button
  • PDF export button (issue present directly in the exported PDF file)
  • Opening the invoice link directly in a browser (Chrome/Firefox) and printing/exporting from there
  • Fresh reinstall of the latest version
  • All of the above produce the same result — content still runs off the right edge

This is a regression, since invoices fit A4 correctly before this update and I haven’t changed any settings, page size, zoom, or template. Happy to attach a sample PDF or screenshot if that helps.

Thanks for looking into this.

[Mabaega]

Can you tell if that long text under the table is coming from a custom field or from the footer? It looks like the layout gets pushed out because the text doesn’t wrap.

[bcman008]

It comes from the custom field. It has been there for several years with absolutely no issue. Also, it is not only that long text from the custom field but also the right top of the invoice.

[Ealfardan]

Hello @bcman008,

Welcome to the forum.

Following the lead given by @Mabaega, and given the fact that you are using the default theme, I noticed that the overflowing text is bold. This means that this is the custom field name.

In fact, I was able to reproduce this behavior with a very long field name of my own, so your case have been verified.

But I’m not sure about why you chose to use such a long field name – you could have a valid reason, but my advice is this:

1. Try using a short field name and use the Description field for your Custom Field to show the note for the user. This will only show on Edit screen of your document and not on the printable document.
   

   

2. In case you still want the note to show on your printed document, the best option, imo, is to separate the field and the note and add the note in a Footer.

Still, even though your case is definitely an edge case but I think this is a bug, mainly because – as a user-friendly software, Manager shouldn’t be too opinionated on what is valid and what is not. And since Manager never set limits to the length of field names so it should work for all of them in the simplist way possible without forcing users onto more advanced features. Also, the fix is just a tiny modification to a theme after all, nothing to serious.

That’s why I will escalate this to bugs category.

But even with all that @bcman008, I still recommend that you do not use such a lengthy field name since that is not a good practice.

[bcman008]

Hello, thank you for coming back to me. As I already explained, I have been using this custom field for several years with absolutely no issues whatsoever. This problem only occurred after recent updates. Also, something important to note and I mentioned it in the description: the long name custom field is only one of the many custom fields affected. On my invoice, I have in the right corned other custom fields that are cut through and are no longer showing up and they are definitely not long, some of them only a few words or a number etc. So it is not only the long name custom field but also the right top corner of my invoice that rungs of the edge and there is no long description (there is short text, number but also a small image that should be there and does not. I am going to upload now the original invoice what it looked like before (had it like this for like 4 years - so that you can see what it should look like - the right side top corner).

I need to have the details on a printable document.

I really hope you can fix this bug because I am now unable to produce invoices due to this issue. Please let me know. Thanks

[bcman008]

Hello, thank you for coming back to me. As I already explained, I have been using this custom field for several years with absolutely no issues whatsoever. This problem only occurred after recent updates. Also, something important to note and I mentioned it in the description: the long name custom field is only one of the many custom fields affected. On my invoice, I have in the right corned other custom fields that are cut through and are no longer showing up and they are definitely not long, some of them only a few words or a number etc. So it is not only the long name custom field but also the right top corner of my invoice that rungs of the edge and there is no long description (there is short text, number but also a small image that should be there and does not. I am going to upload now the original invoice what it looked like before (had it like this for like 4 years - so that you can see what it should look like - the right side top corner).

I need to have the details on a printable document.

I really hope you can fix this bug because I am now unable to produce invoices due to this issue. Please let me know. Thanks

[bcman008]

Hello @Ealfardan, thank you for coming back to me. As I already explained, I have been using this custom field for several years with absolutely no issues whatsoever. This problem only occurred after recent updates. Also, something important to note and I mentioned it in the description: the long name custom field is only one of the many custom fields affected. On my invoice, I have in the right corned other custom fields that are cut through and are no longer showing up and they are definitely not long, some of them only a few words or a number etc. So it is not only the long name custom field but also the right top corner of my invoice that rungs of the edge and there is no long description (there is short text, number but also a small image that should be there and does not. I am going to upload now the original invoice what it looked like before (had it like this for like 4 years - so that you can see what it should look like - the right side top corner).

I need to have the details on a printable document.

I really hope you can fix this bug because I am now unable to produce invoices due to this issue. Please let me know. Thanks

[Ealfardan]

I understand your issue @bcman008 and that is why I placed this under bugs.

However, I’m not the one doing the bug fixing.

Until this gets fixed, the best I can offer to give you is these two workarounds:

Option 1

Use Online Appointment (Delivery) Date* as your field name. Place “* In time zone of the services provider. Please check your booking confirmation for your local time/date” as a note in the footer.

Option 2

Use a Custom Theme. Check this other post which will give you the code for the previous theme (which you faced no problem with) upgraded to the current architecture.

@Ealfardan

Custom Theme

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Styling for consistent look and feel -->
	<style>
        :root { --bg: #f5f5f5; --paper: #fff; }
        /* Do not change the body background-color: this page is loaded inside an
           iframe whose parent uses the same --bg, so they blend seamlessly. A
           different color here would expose the iframe as a visible panel. */
        body { background-color: var(--bg); display: flex; margin: 0; padding: 0; }
        main { background-color: var(--paper); margin: 1rem auto; border: 1px solid #e5e5e5; border-radius: 5px; box-shadow: 0px 4px 6px rgb(0 0 0 / 0.05); padding: 2rem; min-width: 800px; }
        
        @media (prefers-color-scheme: dark) {
          :root { --bg: #292524; --paper: #1c1917; }
          main { color: #ccc; border: 1px solid #0c0a09; box-shadow: 0px 4px 6px rgb(0 0 0 / 0.50); }
        }
        
        @page { margin: 10mm; }
        @media print {
          body { background-color: initial; display: initial; }
          main { padding: 0; border: initial; box-shadow: initial; border-radius: initial; margin: 0; min-width: initial; }
        }


		*, ::after, ::before, ::backdrop, ::file-selector-button {
			margin: 0;
			padding: 0;
		}

		*, ::after, ::before, ::backdrop, ::file-selector-button {
			box-sizing: border-box;
			border: 0 solid;
		}
		body {
			margin: 0;
			padding: 30px;
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-size: 12px;
			color: #111;
			line-height: 1.428571429;
			min-width: 800px;
		}

		table {
			font-size: 12px;
		}

		tr#table-headers th {
			font-weight: bold;
			padding: 5px 10px;
			border-width: 1px;
			text-align: start
		}

		tbody#table-rows td {
			padding: 5px 10px;
			border-left-width: 1px;
			border-right-width: 1px;
			text-align: start;
			vertical-align: top
		}

		tbody#table-rows tr:last-child td {
			padding-bottom: 30px;
			border-bottom-width: 1px;
		}
	</style>
</head>
<body>
    <main>

	<!-- Top section: document title and optional business logo -->
	<table style="margin-bottom: 20px; width: 100%">
		<tbody>
			<tr>
				<td style="vertical-align: top">
					<div style="font-size: 32px; line-height: 32px; font-weight: bold" id="title">Invoice</div>
				</td>
				<td style="text-align: end" id="business-logo">
				</td>
			</tr>
		</tbody>
	</table>

	<!-- Second section: recipient info, document fields (like date, invoice #), and business info -->
	<table style="margin-bottom: 20px; width: 100%">
		<tbody>
			<tr>
				<td style="vertical-align: top" id="recipient-info"></td>
				<td style="text-align: end; vertical-align: top" id="fields"></td>
				<td style="width: 20px"></td>
				<td style="width: 1px; border-left-width: 1px;"></td>
				<td style="width: 20px"></td>
				<td style="width: 1px; white-space: nowrap; vertical-align: top" id="business-info"></td>
			</tr>
		</tbody>
	</table>

	<!-- Description block -->
	<div style="font-weight: bold; font-size: 14px; margin-bottom: 20px" id="description"></div>

	<!-- Main table containing column headers, line items, and totals -->
	<table style="border-collapse: collapse; width: 100%">
		<thead>
			<tr id="table-headers"></tr>
		</thead>
		<tbody id="table-rows">
		</tbody>
		<tbody id="totals">
		</tbody>
	</table>

	<div id="qrcode" style="margin-bottom: 20px"></div>

	<!-- Section for any additional custom fields -->
	<div id="custom-fields"></div>

	<!-- Section for footers -->
	<table><tr><td><div id="footers"></div></td></tr></table>

	<!-- Section for final status (e.g. PAID, VOID) with special styling -->
	<div id="status" style="text-align: center"></div>
</main>
	<script>
	    fetch('/api4/view-v1' + window.location.search, {
          headers: { 'Accept': 'application/json' },
          credentials: 'same-origin',
        })
            .then(response => response.json())
            .then(data => {
                renderDocument(data);
            });
	    
	    
        function renderDocument(data) {
            if (!data) return;
            console.log(data); //debugging
			document.documentElement.dir = data.direction;
			document.title = [data?.business?.name, data?.title, data?.reference].filter(Boolean).join(' - ');

			// Populate title and description if provided
			document.getElementById("title").innerHTML = data.title || "Document";
			document.getElementById("description").innerHTML = data.description || "";

			// Inject business logo image if available
			var businessLogoTd = document.getElementById("business-logo");
			if (data.business.logo) {
				const img = document.createElement("img");
				img.src = data.business.logo;
				img.style = "max-height: 150px; max-width: 300px; display: inline";
				businessLogoTd.appendChild(img);
			}

			// Populate business info section with name and address (convert line breaks)
			const business = data.business || {};
			document.getElementById("business-info").innerHTML = `<strong>${business.name || ""}</strong><br>${business.address ? business.address.replace(/\n/g, "<br>") : ""}`;

			// Populate recipient info section with name and address (convert line breaks)
			const recipient = data.recipient || {};
			document.getElementById("recipient-info").innerHTML = `<strong>${recipient.name || ""}</strong><br>${recipient.address ? recipient.address.replace(/\n/g, "<br>") : ""}`;

			// Insert fields (e.g. issue date, due date) into right-hand side
			const fieldsDiv = document.getElementById("fields");
			let customFields = [];
			fieldsDiv.innerHTML = "";
			(data.fields || []).forEach(f => {
			    if (f.displayAtTheTop === true) {
    				const div = document.createElement("div");
    				div.innerHTML = `<strong>${f.label}</strong><br />${f.text || ""}<br /><br />`;
    				fieldsDiv.appendChild(div);
			    } else {
			        customFields.push(f);
			    }
			});

			// Build table headers dynamically based on `columns` definition
			const headersRow = document.getElementById("table-headers");
			headersRow.innerHTML = "";
			(data.table.columns || []).forEach(col => {
				const th = document.createElement("th");
				th.innerHTML = col.label;
				th.style.textAlign = col.align;
				if (col.minWidth) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '1px';
				}
				else if (col.nowrap) {
					th.style.whiteSpace = 'nowrap';
					th.style.width = '80px';
				}
				headersRow.appendChild(th);
			});

			// Populate main table body with rows and alignments based on column definitions
			const rowsBody = document.getElementById("table-rows");
			rowsBody.innerHTML = "";
			(data.table.rows || []).forEach(row => {
				const tr = document.createElement("tr");
				row.cells.forEach((cell, i) => {
					var col = data.table.columns[i];
					const td = document.createElement("td");
					td.innerHTML = (cell.text || "").split("\n").join("<br />");
					td.style.textAlign = col.align;
					if (col.minWidth) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '1px';
					}
					else if (col.nowrap) {
						td.style.whiteSpace = 'nowrap';
						td.style.width = '80px';
					}
					tr.appendChild(td);
				});
				rowsBody.appendChild(tr);
			});

			// Populate totals section with subtotals, taxes, grand total, etc.
			const totalsBody = document.getElementById("totals");
			totalsBody.innerHTML = "";
			(data.totals || []).forEach(total => {
        		const tr = document.createElement("tr");
        		tr.className = 'total';
        		
        		const tdLabel = document.createElement("td");
        		tdLabel.innerHTML = total.label;
        		tdLabel.colSpan = data.table.columns.length - 1; // Span all columns except last
        		tdLabel.style = 'padding: 5px 10px; text-align: end; vertical-align: top';
        		
        		const tdValue = document.createElement("td");
        		tdValue.innerHTML = total.text; // Formatted amount
        		tdValue.id = total.key; // ID for targeting specific totals (e.g., 'Total')
        		if (total.class) tdValue.classList.add(total.class); // CSS class (e.g., 'taxAmount')
        		tdValue.dataset.value = total.number; // Raw numeric value for calculations
        		tdValue.style = 'padding: 5px 10px; border-width: 1px; text-align: right; white-space: nowrap; vertical-align: top';
        
				// Bold totals if marked as 'emphasis'
				if (total.emphasis) {
					tdLabel.style.fontWeight = 'bold';
					tdValue.style.fontWeight = 'bold';
				}
        		tr.appendChild(tdLabel);
        		tr.appendChild(tdValue);
        		totalsBody.appendChild(tr);
        	});
        	

			// Render custom fields section below the table (e.g. notes, terms)
			const customFieldsDiv = document.getElementById("custom-fields");
			customFieldsDiv.innerHTML = "";
			(customFields || []).forEach(f => {
				const div = document.createElement("div");
				div.innerHTML = `<strong>${f.label || ""}</strong><br />${(f.text || "").split("\n").join("<br />")}<br /><br />`;
				customFieldsDiv.appendChild(div);
			});

			// Render footers section
			const footersDiv = document.getElementById("footers");
			footersDiv.innerHTML = "";
			(data.footers || []).forEach(f => {
				const div = document.createElement("div");
				div.style = 'margin-top: 20px';
				div.innerHTML = f;
				footersDiv.appendChild(div);

				// Find and execute any script tags
				const scripts = div.querySelectorAll("script");
				scripts.forEach(script => {
					const newScript = document.createElement("script");

					// Copy script attributes if needed
					for (const attr of script.attributes) {
						newScript.setAttribute(attr.name, attr.value);
					}

					// Inline script handling
					if (script.textContent) {
						newScript.textContent = script.textContent;
					}

					// Replace the old <script> with the new one so it executes
					script.parentNode.replaceChild(newScript, script);
				});
			});

			// Display status label (e.g. PAID, CANCELLED) with colored border based on status type
			const statusDiv = document.getElementById("status");
			if (data.emphasis?.text != null) {
				statusDiv.style.marginTop = '40px';
				const span = document.createElement("span");
				span.style = 'border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px; text-transform: uppercase';
				if (data.emphasis.positive) {
					span.style.color = 'green';
					span.style.borderColor = 'green';
				}
				if (data.emphasis.negative) {
					span.style.color = 'red';
					span.style.borderColor = 'red';
				}
				span.innerHTML = data.emphasis.text;
				statusDiv.appendChild(span);
			}
            
            /*
			// This handles QR code on invoices for Saudi Arabia - this is here just temporarily. Better way will be implemented.
			if (data.legacyQrCodeForSaudiArabia) {
				function appendTLV(tag, text, byteList) {
					const encoded = new TextEncoder().encode(text);
					byteList.push(tag);
					byteList.push(encoded.length);
					for (let b of encoded) byteList.push(b);
				}

				const byteList = [];

				let businessName = 'No name';
				if (data.business) businessName = data.business.name;

				let vatNumber = '0000000000000';
				let vatField = data.business.custom_fields.find(item => item.key === "d96d97e8-c857-42c6-8360-443c06a13de9");
				if (vatField) vatNumber = vatField.text;

				let timestamp = new Date((data.timestamp - 621355968000000000) / 10000).toISOString();

				let total = 0;
				let totalElement = document.getElementById('Total');
				if (totalElement != null) total = parseFloat(totalElement.getAttribute('data-value'));

				let vat = 0;
				let taxAmounts = document.getElementsByClassName('taxAmount');
				for (let i = 0; i < taxAmounts.length; i++) {
					vat += parseFloat(taxAmounts[i].getAttribute('data-value'));
				}

				appendTLV(1, businessName, byteList);
				appendTLV(2, vatNumber, byteList);
				appendTLV(3, timestamp, byteList);
				appendTLV(4, total.toFixed(2), byteList);
				appendTLV(5, vat.toFixed(2), byteList);

				// Convert to Uint8Array
				const tlvBytes = Uint8Array.from(byteList);

				// Convert to Base64
				const qrData = btoa(String.fromCharCode(...tlvBytes));

				new QRCode(document.getElementById("qrcode"), {
					text: qrData,
					width: 128,
					height: 128,
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.L
				});
			}
			*/
        }

	</script>

</body>
</html>

Copy the code above, then go to Settings > Custom Themes > New Custom Theme and paste it into the text area as follows:

[bcman008]

Hello, thank you for this. I copied the above custom theme and it works, unfortunately I have to do it separately for every invoice (the tick on the form applies only to new invoices) so I can work with this for a while as long as this bug exists. I have just updated Manager to the latest version and the bug is still not fixed. Is there any solution how to get them to fix this page margin custom fields issue bug? Is there something like an email address or something or who actually does fix this kind of issues? You said it is not you, so who can fix this bug? I don’t understand how they managed to come up with this bug after so many years. When can I realistically expect them to fix this bug? Thanks once again for your help and support, much appreciated!

[Ealfardan]

You can make a default by going to each tab (e.g. Sales Invoices) > Form defaults and set the Custom theme field from there.

[Shiatsu]

I am experiencing the same issue, including the fact that the Custom fields are not even showing on the new invoices and ar all pushed to the left on the ones that I had issued before upgrading.
I have tried all the options listed but none seems to work.
Will it be possible to bring back the old classic custom fields, please?
Info that I place on these fileds is relevant to my Patients.

[bcman008]

Like I mentioned above, you can do it only for new invoices - the form defaults only apply to creation of new invoices. All my previous invoices for the past 5 years are crooked running off the page…

[Ealfardan]

A batch update could fix this pretty quickly.

[bcman008]

How exactly can I do that?

[Ealfardan]

You can refer to this guide for batch updating

Manager.io

Warning: during Batch Update operation, any deleted column will result in deleted field data. It advised not to delete any columns in your spreadsheet unless you are certain that they are completely empty.

[lubos]

@bcman008 Default theme is subject to change. It keeps evolving. Custom theme will lock everything in place.

Anyway, default theme in the latest version (26.7.14) will wrap long field names into multiple lines.

[bcman008]

please see the invoice that I posted above (with grey boxes in it to keep the privacy - this is a correct invoice what it looked like before the broken Manager. io updates) and have a look at the right top corner and then compare it with the very first picture of the “broken” invoice (after the problematic updates) - I have no long custom field names there at all, they are pretty short e.g. ZIP code, email, tax reg. number etc. (in the right top corner of the invoice), yet, the content runs of the right edge of A4 page anyway. Is the new update that you mentioned going to fix the issue as well? Of course the default template keeps “evolving” but it was working just perfectly fine for so many years with no such issues and now suddenly the custom fields run off the edge of the page and became problematic. It is okay to “evolve” but the evolution should be in the right direction and should not brake the page content and fields.

[Ealfardan]

Hello @bcman008,

I can confirm that in the latest update, the problem has been fixed so I recommend that you update.

[bcman008]

Thank you very much, appreciated!