Invoices in view mode look strange

When I go into invoices and view one it looks like this version 25.9.28.2843 windows 11 64 bit. Its all narrow and long. it is a custom invoice

Check your custom theme, make sure to set body style min-width to 800px;

/* BODY STYLES - Main document styling */
		body {
			margin: 0;
			padding: 30px; /* Space around document content */
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Change font family here */
			color: #171717; /* Main text color */
			font-size: 12px; /* Base font size for document */
			line-height: 1.428571429;
			min-width: 800px; /* Minimum width to prevent layout breaking */
		}

I can not even see body style

        <td colspan="10" style="padding: 0 50px;border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px; border-right-width: 1px;{% if business.logo != null %}background-image:URL({{ business.logo }});background-repeat:no-repeat;background-size:100% 100%;{% endif %}">
            <table style="margin-bottom: 20px">
              
           
              
            </table>
             <table style="margin-bottom: 20px">
              <tr>
                <td>
                 <td style="font-weight: bold; font-size: 18px; padding-Right:55px; text-align: Right">{{  title| replace: "Invoice", "Invoice" | newline_to_br }}</td> 
                    <tr> 
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                    
                </td>
                 
                <td style="border-right-width: 1px; padding-right: 20px; text-align: right">
                   
                    {% for field in fields %}
                    <div style="font-weight: bold">{{ field.label }}</div>
                    <div style="margin-bottom: 10px">{{ field.text }}</div>
                     
                    {% endfor %}
                </td>
                  
                <td style="padding-left: 20px; width: 1px; white-space: nowrap">
                    <div style="font-weight: bold">{{ business.name }}</div>
                    <div>{{ business.address | newline_to_br }}</div>
                    <div>{{ business.identifier }}</div>
                      
                </td>
                 
              </tr>
               </td>
               
                     
                     
            </table>
           <tr><td>&nbsp;</td></tr>
        </td>
    </tr>
    <tr>
        {% for column in table.columns %}            
        <td style="font-weight: bold; padding: 5px10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    {% for column in table.columns %}            
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}">&nbsp;</td>
    {% endfor %}
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-color: #000; border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}
    {% for field in custom_fields %}
    <tr>
        <td colspan="99">
           
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %}

    {% if emphasis.text != null and emphasis.positive %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px;border-color: #006400;  padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}

    {% if emphasis.text != null and emphasis.negative %}
    <tr><td colspan="99"><div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px;border-color: #FF0000;  padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div></td></tr>
    {% endif %}
        
</tbody>
 <tfoot>
    <tr><td colspan="99">
        <div style="text-align: center;  font-size: 14px; padding: 100px 80px;  color: #000000">
            <div style="font-weight: bold">{{ " My policy is not to file unless invoice is paid" }}</div>
            <div>{{ " Please make payments to" }}</div>
            <div>{{ " M Cliff" }}</div>
            <div>{{ "Account  38-9006-0861056-01" }}</div>
            <div>{{ " And use your Invoice number as a reff number" }}</div>
          <div>{{ " Once I have filed your  returns I will give you a bound set of year end Reports" }}</div>
            <div>{{ "  THANK YOU FOR YOUR CUSTOM" }}</div>
        </div>
    </td></tr>
</tfoot>
 

Its all good amazing AI to the rescue. why after all these years it changed .it took me by surprize

You’re still using an old custom theme. This should have been fixed in Manager version 25.9.30.

yes I have had it for years since 2014? that’s why I did not want it to change customers are used to it. I dont mind up dating but it needs to look the same. What do I have to do to update it?

It seems you may need to try updating your Manager version. However, if you prefer not to update Manager, you can try updating your custom theme code instead.

Wrap your theme code inside the following code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			*, ::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: 0px;
				font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
				color: #171717;
				padding: 30px;
				min-width: 800px;
				font-size: 12px;
				line-height: 1.428571429;
			}
			table {
				width: 100%;
				border-collapse: collapse;
				font-size: 12px;
			}
			a {
				color: #171717;
				text-decoration: none;
			}
			* {
				border: 0px solid #000;
			}

			@media print {
				body {
					min-width: auto; /* Allow natural width for print */
				}
			}
		</style>
	</head>
	<body>


<!-- your old theme code -->


		<script>
			window.addEventListener("load", () => window.parent.postMessage({ type: "resize", width: document.documentElement.scrollWidth + 1, height: document.documentElement.scrollHeight + 1},"*"));
		</script>

	</body>
</html>

I haven’t tried it myself, but it should work fine.

2 Likes

I do have the latest version ha ha but thanks its all good