PDF error with custom themes

03kill · August 24, 2020, 8:43pm

I understand that custom themes are generally not supported here but thought I would ask anyways to see if anyone else here has had a similar issue and have found a fix for it.

I am using the cloud edition of manager with a custom invoice theme. I’m not using any custom fonts or images. The only image is my business logo which works fine in the standard themes.

When I click the PDF button while viewing the invoice, it downloads as expected but will not open. I just get a message that says “unable to open document. PDF document is damaged”

Here is the full theme I am working with…

<table style="padding: 30px">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: -80px"><tr>
                    <td style="font-weight: bold; font-size: 32px">{{ title }}</td>
                    {% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %}
                </tr></table>
                
                <table style="margin-bottom: 60px"><tr>
                    <td>
                        {% if business.address != null %}
                        <div style="font-weight: bold">{{ business.name }}</div>
                        <div>{{ business.address | newline_to_br }}</div>
                        {% for field in business.custom_fields %}
                        <div>{{ field.label }} {{ field.text }}</div>
                        {% endfor %}
                        {% endif %}
<br><br><br><br><br><br>
                        <div style="font-weight: bold">{{ recipient.name }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</div>
                    </td>
                    <td style="text-align: right">
                        {% for field in fields %}
                        <div style="font-weight: bold; margin-top: 100px">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text }}</div>
                        {% endfor %}
                    </td>
                </tr></table>

                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            {% for column in table.columns %}
            <td style="font-weight: bold; padding: 5px 10px; 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 %}; 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 %}
        <tr>
        {% 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 %}
        </tr>
        {% 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-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 style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                <div>{{ field.text | newline_to_br }}</div>
            </td>
        </tr>
        {% endfor %}

        <tr>
            <td colspan="99">
                {% if emphasis.text != null and emphasis.positive %}
                <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>
                {% endif %}

                {% if emphasis.text != null and emphasis.negative %}
                <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>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>


<!-- New Design -->

<section id="deposit_table" style="width: calc(100% - 60px);float: left;box-sizing: border-box;clear: both;border: 2px solid #333;padding: 20px;margin: 30px;">
	<h2 style="text-align: center;margin-top: 0;">DEPOSIT</h2>
	
	<table width="55%" style="width: 55%;margin-right: 20px ;border-collapse: collapse;float: left;">
		<form>
			<tr>
				<td style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="date" >Date</label></td>
				<td style="width: calc(100% - 120px);height: 40px;vertical-align: bottom;"><input type="text" id="date" name="date" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;"></td>
			</tr>
			<tr>
				<td style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="name" >Name</label></td>
				<td style="width: calc(100% - 120px);height: 40px;vertical-align: bottom;"><input type="text" id="name" name="name" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;">{{ recipient.name }}</td>
			</tr>
			<tr>
				<td style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="accnumber">Account Number</label></td>
				<td style="width: calc(100% - 120px);height: 40px;vertical-align: bottom;"><input type="text" id="accnumber" name="account number" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;"></td>
			</tr>
			
			<tr>
				
				<td colspan="2" style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;">
					<br><br><b>Bank of America</b><br>PO Box 105576<br>Atlanta, GA 30348-5576
				</td>
			</tr>
		</form>
	</table>
	<table style=" text-align:left;border: 1px solid black; width: 40%; border-collapse: collapse;float: left;">
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;vertical-align: middle;font-weight: 700;">CASH</th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;vertical-align: middle;font-weight: 700;">CHECK</th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black; width: 33.33%;padding: 0 5px;height: 30px;"></th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;"></th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;"></th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;vertical-align: middle;font-weight: 700;">Subtotal</th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;vertical-align: middle;font-weight: 700;">Less Cash</th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
		<tr>
			<th style="border: 1px solid black;width: 33.33%;padding: 0 5px;vertical-align: middle;font-weight: 700;">TOTAL</th>
			<td style="border: 1px solid black;width: 33.33%;padding: 0 5px;height: 30px;"></td>
			<td style="border: 1px solid black;width: 10.33%;padding: 0 5px;height: 30px;"></td>
		</tr>
	</table>
</section>

lubos · August 24, 2020, 11:02pm

The issue is that Manager supports only limited number of HTML tags and CSS attributes. Just by looking at your new design, something like calc(100% - 120px) or float: left would not work.

I need to publish definitive list of HTML tags and CSS attributes that are supported.

03kill · September 3, 2020, 6:45am

Thanks for the feedback. If you could publish that list it would be greatly helpful. I’ve been pulling my hair out trying to make this thing work. I changed things up a bit and I’m no longer getting the PDF error but it still doesn’t display as expected.

I own a few apartment buildings and I like to send my tenants invoices every month to remind them to pay, how much to pay, and where to pay. the goal is to have a printable invoice with a deposit slip on the bottom portion of the page that can be torn off when printed on perforated paper. This way they can just drop it in the mail and it goes straight to my bank and gets deposited. My account number and their name will already be on it. I want to make it as easy to pay as possible. Even though we have online pay options, most of may tenants mail their rent in or just take it straight to the bank. Having a pre-formatted deposit slip that can just be torn off would really make things easier for them and for me. It still needs some work but here’s where I’m at with it…

<table style="padding: 10px">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: 20px"><tr>
                    <td style="font-weight: bold; font-size: 32px">{{ title }}</td>
                    {% if business.logo != null %}<td class="text-end"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %}
                </tr></table>
                
                <table style="margin-bottom: 20px"><tr>
                    <td>
                        <div style="font-weight: bold">{{ recipient.name }}</div>
                        <div>{{ recipient.address | newline_to_br }}</div>
                        <div>{{ recipient.identifier }}</div>
                    </td>
                    <td class="text-end">
                        {% for field in fields %}
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text }}</div>
                        {% endfor %}
                    </td>
                    {% if business.address != null %}
                    <td style="width: 20px"></td>
                    <td class="border-start" style="width: 20px"></td>
                    <td style="width: 1px; white-space: nowrap">
                        <div style="font-weight: bold">{{ business.name }}</div>
                        <div>{{ business.address | newline_to_br }}</div>
                        {% for field in business.custom_fields %}
                        <div>{{ field.label }} {{ field.text }}</div>
                        {% endfor %}
                    </td>
                    {% endif %}
                </tr></table>

                <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
            </td>
        </tr>
        <tr>
            {% for column in table.columns %}
            <td class="text-{{ column.align }} border-start{% if forloop.last == true %} border-end{% endif %}" style="font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-top-width: 1px{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in table.rows %}
        <tr>
            {% for cell in row.cells %}
            <td class="text-{{ table.columns[forloop.index0].align }} border-start{% if forloop.last == true %} border-end{% endif %}" style="padding: 5px 10px; {% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
        <tr>
        {% for column in table.columns %}
            <td class="border-start{% if forloop.last == true %} border-end{% endif %}" style="border-bottom-width: 1px">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td class="text-end" colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td class="border-start border-end text-right" style="white-space: nowrap; border-bottom-width: 1px; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
        </tr>
        {% endfor %}

        {% for field in custom_fields %}
        <tr>
            <td colspan="99">
                <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                <div>{{ field.text | newline_to_br }}</div>
            </td>
        </tr>
        {% endfor %}

        <tr>
            <td colspan="99">
                {% if emphasis.text != null and emphasis.positive %}
                <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>
                {% endif %}

                {% if emphasis.text != null and emphasis.negative %}
                <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>
                {% endif %}
            </td>
        </tr>
    </tbody>
	
	<!-- New Design -->


	<tfoot style="float: left;box-sizing: border-box;clear: both;border: 2px solid #333;padding: 20px;margin: 30px;">

			<div style="text-align: center;margin-top: 0;">DEPOSIT</div>
			<div width="55%" style="width: 55%;margin-right: 20px ;border-collapse: collapse;float: left;">
				<tr>
					<td colspan="99">
						<div style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="date" >Date</label></div>
						<div style="height: 40px;vertical-align: bottom;"><input type="text" id="date" name="date" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;"></div>
					</td>
				</tr>
				<tr>
					<td style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="name" >Name</label></td>
					<td style="height: 40px;vertical-align: bottom;"><input type="text" id="name" name="name" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;">{{ recipient.name }}</td>
				</tr>
				<tr>
					<td style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;"><label for="accnumber">Account Number</label></td>
					<td style="height: 40px;vertical-align: bottom;"><input type="text" id="accnumber" name="account number" style="border:none; outline:none;border-bottom: 1.5px solid #000;width: 100%;padding: 0 5px;font-size: 16px;"></td>
				</tr>
				
				<tr>
					
					<td colspan="2" style="width: 120px;height: 40px;padding: 0 5px ;vertical-align: bottom;">
						<br><br><b>Bank of America</b><br>PO Box 105576<br>Atlanta, GA 30348-5576
					</td>
				</tr>
			</div>
		
	</tfoot>
	
</table>

PFIVE · October 5, 2020, 7:17am

I am also running into the same issues with customising themes…it looks good but i cannot email it or pdf it…unfortunately…

Any suggestions?

Thanks

PFIVE · October 8, 2020, 12:50am

Error identified as unsupported CSS attributes by Manager…although fixed but a lot of time spent to find out…appreciate publishing a list of supported attributes as initially planned to save us time on themes.

Thank you

Topic		Replies	Views
Fonts on Email PDF not working	8	1340	January 18, 2023
PDF creation not consistently	6	447	January 18, 2023
PDF / Email error on custom theme	4	621	January 18, 2023
Problem with pdf & e-mail export	6	1170	January 18, 2023
I have a custom template	11	1424	January 18, 2023

PDF error with custom themes

Related topics