Image works on Firefox but not on Chromium based browsers

1

Hello, hope everyone is doing well. :smiley:

I have created a custom theme that has been working well for quite a few updates but is now broken and I can’t seem to understand why.

I have attached a logo image on-to manager and using that link in my custom theme.

Now this image displays on preview but does not display in the print preview options in Chromium based browsers.

However, it works absolutely fine on Firefox.

The image source line looks like this so that I have no problems even if Manager uses a different port on each startup.

2

If the theme is displayed properly in view mode then that’s good new, this means most likely that your base html is ok.

However, when talking about printing, there are two separate buttons:

  • Print uses your browsers built-in printer. Any errors here are most likely due to either browser compatibility issues or errors in advanced html/css.

  • PDF uses manager’s pdf printer to properly paginate documents and provide proper headers and footer but this comes at the expense of not supporting some html tags and css properties.

But it could be something else, so you should provide the following information at minimum:

  • Edition (i.e cloud, desktop, server) and Version (bottom of the page in manager)
  • Edit screens for custom theme and affected document
  • The output pdf showing the error.
4

You still didn’t provide the edit screen for the theme. Even better, you can just copy and paste the code.

5

I don’t think the problem lies therein but here goes.

    <table style="margin-bottom: 20px;padding:0px"><tr>
                                    <td style="text-align: center">
                                    <img src="./view-attachment?Key=1a3d91e3-dd50-4dab-a537-c3bdc0f99ed3&FileID=THV4bGVkIFRyYWRpbmcgTExD"  style="max-height: 100%; max-width:100%"  />
                                    </td>
          </tr></table>
            <center><p style="font-weight: bold; font-size: 32px">{{ title }}</p></center>

            <table style="margin-bottom: 20px"><tr>
                <td>
                    <h6>CUSTOMER</h6>
                    <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                <td style="{% if business.address != null %}border-right-width: 1px; padding-right: 20px; {% endif %}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>
                {% if business.address != null %}
                <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><br>
                                <b>BANK ACCOUNT DETAILS</b><br>
	removed
                </td>
                {% endif %}
				
				 {% 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></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 %}

    <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>
6

I solved this by creating a div tag on the logo.

Adding a div tag will cache the image and ensure it shows up in Chrome’s print preview dialog.

1 Like
7

Nice work.

Thanks fo updating us with the solution.