I can't repeat invoice headers on all pages

1

Invoice headers only repeat on the first page printing (The PDF button works fine and repeats headers). However If I deleted either the tag containing recipient.code and name etc OR the tag containing the {{ description }} everthing will be fine and the headers will be repeated.
Is there a limit of somesort on the amount of variables?

this is my code

<table style="padding: 20px; padding-bottom: 5px;">
    <thead>
        <tr>
            <td colspan="99">
                <table style="font-weight: bold; color: #ffffff;
                background-color: #80b959; border-bottom-width: 5px;
                 border-color: #C5E0B3; padding: 5px; border-radius: 8px;">
                    <tr>
                        <td dir="rtl" style="text-align: right; padding-right: 10px">
                            <div style="font-weight: bold; font-size: 34px;
                            padding-top: 5px; padding-bottom: 10px; color: #ffffff"><h2  style="font-weight: bold; color: #ffffff;" >{{ business.name }}</h2>
                            </div>
                            <div style="font-weight: bold; font-size: 14px;
                                color: #ffffff; padding-right: 30px;">
                            {{ business.address | newline_to_br }}</div>
                            <div style="font-weight: bold; font-size: 14px;
                            color: #ffffff; padding-right: 30px;">
                            {{ business.identifier }}</div>
                        </td>
                        {% if business.logo != null %}
                        <td STYLE="text-align: center; padding-top: 5px; padding-right: 50px;" >
                            <img src="{{ business.logo }}" style="max-height: 130px; width: -200px">
                        </td>
                        {% endif %}
                        <td style="text-align: center; font-weight: bold; padding-bottom: 10px;
                        font-size: 22px; padding-left: 10px; padding-top: 5px; color: #ffffff;">{{ title }}
                            {% for field in fields %}
                            <div style="padding-top: 2px; font-size: 14px;font-weight: bold">
                                {{ field.label }}</div>
                            <div style="padding-top: 2px; font-size: 14px;margin-bottom: 10px">
                                {{ field.text }}</div>
                            {% endfor %}
                        </td>
                    </tr>        
                </table>
            </td>
        </tr>       
      
        <tr>
            <td colspan="99">
                    <div style="font-weight: bold; font-size: 16px">      
                            <b>{{ recipient.code }}</b><b> - </b>{{ recipient.name }} </div>
                    <div>{{ recipient.address }}</div>
                    <div>{{ recipient.identifier }}</div>    
            </td>
        </tr>
        <tr>
            <td colspan="99">
            <div style="padding-right: 30px; font-size: 14px;
             font-weight: bold; margin-bottom: 20px">{{ description }}</div>
             </td>
        </tr>

        <tr>
            <td style="border-radius: 0px 5px 5px 0px ; padding: 2px; width: 10px;
            font-weight: bold; color: #ffffff;
            background-color: #80b959; border-bottom-width: 5px;
             border-color: #C5E0B3; padding: 10px; text-align: center;">#</td>
            {% assign removedCols = 1 %}
            {% for column in table.columns %} 
            {% if column.label == "name2" %} 
                {% assign j = forloop.index0%}
                {% assign removedCols = removedCols | plus: 1 %}
            {% continue %}
            {% else %} 
            <td style="padding: 2px; font-weight: bold; color: #ffffff;
            background-color: #80b959;
            border-bottom-width: 5px;
            border-color: #C5E0B3;
                padding: 10px;
                text-align: right;
                text-align: {{ column.align }};
                {% if forloop.first %};
                padding-left: 30px{% endif %}
                {% if forloop.last %};
                text-align: right; white-space: nowrap;
                padding-left: 10px ; border-radius: 5px 0px 0px 5px; {% endif %}
                {% if column.nowrap %}; width: 120px{% endif %}">
                {{ column.label }}
                </td>
            {% endif %}
            {% endfor %}
        </tr>
    </thead>
2

Your problem is not clear. Is this a problem with PDF or Print?

3

Built-in themes do not include code for repeating headers. They simply break wherever the page ends, depending on page format. The repeated headers were added to the internal PDF generator only, and that is no longer actively supported because of language issues. So, if you want repeated headers, you will need a custom theme, and you are on your own for their coding and performance.

4

@Ealfardan the problem is with Print
@Tut I think repreated headers is a reasonable request and should be supported by the program. How else would you connect the second page to the first one and prevent mixing it up with other pages of other invoices?
Anyways. I was thinking it’s a bug otherwise why having both these tags

            <td colspan="99">
                    <div style="font-weight: bold; font-size: 16px">      
                            <b>{{ recipient.code }}</b><b> - </b>{{ recipient.name }} </div>
                    <div>{{ recipient.address }}</div>
                    <div>{{ recipient.identifier }}</div>    
            </td>
        </tr>

and

        <tr>
            <td colspan="99">
            <div style="padding-right: 30px; font-size: 14px;
             font-weight: bold; margin-bottom: 20px">{{ description }}</div>
             </td>
        </tr>

disables headers but deleting either of them works fines ?

5

Print doesn’t repeat headers like PDF does. So I’m not sure what you’re talking about.

You’re probably already using a custom theme before introducing this change. In that case, it’s not a bug with Manager, it’s a bug in your custom theme.

Anyway, making the Print repeat headers isn’t a trivial task and it requires rebuilding the entire theme. Also, it will break the PDF function – that could be why you don’t see it developed because there are lots of users who still heavily rely on PDF.

There’s a quick fix for the main table headers to be repeated, if you’re not willing to go the full way to develop a custom theme from scratch.

6

It is, but you need a custom theme, as already explained by both @Ealfardan and me.

That is a question for whoever is doing your coding. This forum is not the right place for programming questions.

7

Thanks for replying.

Print doesn’t repeat headers like PDF does. So I’m not sure what you’re talking about.

Print doesn’t repeat headers at all even with default themes. I have to figured out by reorganizing the table and div tags just a little and deleting few tags make it repeat invoice headers.

You’re probably already using a custom theme before introducing this change. In that case, it’s not a bug with Manager, it’s a bug in your custom theme.

I tested with the simple Plain theme and the issue is still there you can try it for yourself

<table style="padding: 30px; width: 100%">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: 20px; width: 100%"><tr>
                    <td style="font-weight: bold; font-size: 32px; vertical-align: top">{{ title }}</td>
                    {% if business.logo != null %}<td style="text-align: end"><img src="{{ business.logo }}" 
                    style="max-height: 150px; max-width: 300px; display: inline" /></td>{% endif %}
                        <td style="text-align: end; vertical-align: top">
                        {% for field in fields %}
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text }}</div>
                        {% endfor %}
                    </td>
                </tr></table>
                
                <table style="margin-bottom: 20px; width: 100%"><tr>
                    <td style="vertical-align: top">
                        <div style="font-weight: bold">{{ recipient.name }}</div>
                    </td>
                </table>
            </td>
        </tr>
        <tr>
            {% for column in table.columns %}
            <td style="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; text-align: {{ column.align }}; font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-bottom-color: #000; border-top-width: 1px; border-top-color: #000; border-top-style: solid; border-bottom-style: solid{% 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="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; {% 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="writing-mode: horizontal-tb; border-inline-start-width: 1px; border-inline-start-style: solid; border-inline-start-color: #000; {% if forloop.last == true %} border-inline-end-width: 1px; border-inline-end-style: solid; border-inline-end-color: #000{% endif %}; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid">&nbsp;</td>
        {% endfor %}
        </tr>
        {% for total in table.totals %}
        <tr>
            <td colspan="{{ table.columns | size | minus:1 }}" style="text-align: end; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
            <td style="border-left-width: 1px; border-left-style: solid; border-left-color: #000; border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; white-space: nowrap; border-bottom-width: 1px; border-bottom-color: #000000; border-bottom-style: solid; 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; border-style: solid; 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; border-style: solid; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

this is the result I’m looking for (I just moved the Invoice Date and Number to the corner and deleted few tags):

image
image1014Ă—666 61.6 KB

Anyway, making the Print repeat headers isn’t a trivial task and it requires rebuilding the entire theme. Also, it will break the PDF function – that could be why you don’t see it developed because there are lots of users who still heavily rely on PDF.
There’s a quick fix for the main table headers to be repeated, if you’re not willing to go the full way to develop a custom theme from scratch.

I don’t mind either way I want to solve this (if possible on my side) even if it means redesigining the whole thing.

8

I am doing the coding. I explained my problem better in my previous reply.
I need to understand what causes the program to behave weirdly like this in order to make my custom theme.

9

You have already been told the Plain theme does not have this capability. That is why you need a custom theme. Testing with Plain is pointless.

It is not weird. The program follows the Liquid code of whatever theme is used to display completed transaction forms. If you do not understand that code, hire a programmer who does for the task.

10

After some googling I found out what the problem was. Apparently the tag should not exceed 250px in height otherwise it will not be repeated. All I needed to do was to make the headers a bit shorter.

1 Like