Custom theme table height

Hi, I’m having a very specific issue with the custom themes,
I’m not able to render the main table on the invoice to fill the rest of the height on the document, I want to make the invoice fill the whole page even if there are not enough items to fill it. I tried to force the template to use a fixed height in px, but when printed or saved has a PDF no height is changed, I can only see the change on the preview of the theme, here I send a copy of the custom theme I made based on the “Plain” theme.

<table style="padding: 30px;">
    <thead>
        <tr>
            <td colspan="99">
                <table style="margin-bottom: 10px"><tr>
                    <td style="font-weight: bold; font-size: 28px">{{ title }}</td>
                    {% if business.logo != null %}<td class="text-end"><img src="{{ business.logo }}" style="max-height: 100px; max-width: 250px" /></td>{% endif %}
                </tr></table>
                <table style="margin-bottom: 20px;"><tr>
                    <td>
                        {% if custom_fields["Shipper"] and custom_fields["Shipper Address"] %}    
                            <div style="font-weight: bold">Shipper</div>       
                            <div>{{ custom_fields["Shipper"] | newline_to_br }}</div>
                            <div>{{ custom_fields["Shipper Address"] | newline_to_br }}</div>
                        {% endif %}           
                        {% if custom_fields["Shipper"] and custom_fields["Shipper Address"] %}  
                            <div style="font-weight: bold; margin-top: 10px">Consignee</div>   
                            <div>{{ recipient.name }}</div>
                        {% else %}                             
                        <div style="font-weight: bold">{{ recipient.name }}</div>
                        {% endif %} 
                        <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 custom_fields["Docket #"] or custom_fields["Pickup #"] or custom_fields["REP"] or custom_fields["Docket #"]%}    
                    <td style="width: 20px"></td>
                    <td class="border-start" style="width: 20px"></td>        
                    <td style="width: 1px; white-space: nowrap">
                        {% for field in custom_fields %}
                        {% if field.label == 'FOB' %}{% continue %}{% endif %}            
                        {% if field.label == 'Ship Via' %}{% continue %}{% endif %}         
                        {% if field.label == 'Terms' %}{% continue %}{% endif %}   
                        {% if field.label == 'Notes' %}{% continue %}{% endif %}                        
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text | newline_to_br }}</div>                          
                        {% endfor %}
                    </td>
                    {% endif %}                    
                    {% if custom_fields["FOB"] or custom_fields["Ship Via"] or custom_fields["Terms"] or custom_fields["Docket #"]%}    
                    <td style="width: 20px"></td>
                    <td class="border-start" style="width: 20px"></td>        
                    <td style="width: 1px; white-space: nowrap">
                        {% for field in custom_fields %}
                        {% if field.label == 'Docket #' %}{% continue %}{% endif %}         
                        {% if field.label == 'Pickup #' %}{% continue %}{% endif %}    
                        {% if field.label == 'REP' %}{% continue %}{% endif %}                        
                        {% if field.label == 'Notes' %}{% continue %}{% endif %}                            
                        <div style="font-weight: bold">{{ field.label }}</div>
                        <div style="margin-bottom: 10px">{{ field.text | newline_to_br }}</div>
                        {% endfor %}
                    </td>
                    {% endif %}
                    {% 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 %}
        {% if field.label == 'Docket #' %}{% continue %}{% endif %}         
        {% if field.label == 'Pickup #' %}{% continue %}{% endif %}    
        {% if field.label == 'REP' %}{% continue %}{% endif %}        
        {% if field.label == 'FOB' %}{% continue %}{% endif %}            
        {% if field.label == 'Ship Via' %}{% continue %}{% endif %}         
        {% if field.label == 'Terms' %}{% continue %}{% endif %}            
        <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>

Any help would be very appreciated, thank you all.

@kuipumu i have no experince in coding but i will suggest a diferent aproach.

Go to form default, invoice
add as many rows as are needed to fill the whole invoice and save.

each time you you fill an invoice you just fill the rows you need and leave the others empty.

in theory should work. but you may have to delete an empty row if your description uses 2 rows for example.

1 Like

This is not a recommended practice. It will produce the visual result you want. But every line in Manager is a general ledger entry. So you will be creating many, many empty entries. These can show up later in various reports, and you will wonder where they came from. The only way to get rid of them will be to go back and edit all your invoices. It could also send your transactions to Suspense for lack of needed information.

@kuipumu it seems tut is right, didnt think of that
you will get all these empty lines in suspense

thanks @Tut