I want the last row to take up the remaining space of the page (height)
Like this
But I don’t know how to calculate the remaining space without JS
<table class="items-table mt-5">
<thead>
<tr>
<th>Sr</th>
<th>Item</th>
<th>Batch</th>
<th>Expiry</th>
<th>Qty</th>
<th>Rate</th>
<th>MRP</th>
<th>Amt</th>
<th>Tax</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
{% for item in doc.items %}
<tr>
<td>{{ loop.index }}</td>
<td>{{ item.item_code }}</td>
<td>{{ item.batch_no }}</td>
<td>{{ item.expiry_date or '' }}
<td>{{ item.qty }}</td>
<td>{{ item.rate }}</td>
<td>{{ item.mrp or '' }}</td>
<td>{{ item.amount }}</td>
<td>{{ item.tax_amount or '' }}</td>
<td>{{ item.amount + (item.tax_amount or 0) }}
</tr>
{% endfor %}
</tbody>
</table>
.items-table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.items-table th {
background-color: #eeeeee;
color: black;
padding: 8px;
border: 1px solid #ddd;
}
.items-table td {
padding: 8px;
border: 1px solid #ddd;
}
Hi @zeeeeeeeero,
You can use width = 100% in table tag, might that will solve your problem.
If you are certain that your content will always fit in one page, then you can calculate it based on the page height.
Otherwise if the table breaks into another page, then that is not possible without JS.
+1 to @sahilsuthar solution to use percent of width. You’ll set this up in the table headers. Here’s an example of what I use for Quotation print format:
<table style="width:100%;">
<thead>
<tr style="border: 1px solid black; border-collapse: collapse;">
<th style="border: 1px solid black; width: 20%; text-align: left;">Item</th>
<th style="border: 1px solid black; width: 46%; text-align: left;">Description</th>
<th style="border: 1px solid black; width: 12%; text-align: right;">QTY</th>
<th style="border: 1px solid black; width: 10%; text-align: right;">Price</th>
<th style="border: 1px solid black; width: 12%; text-align: right;">AMT</th>
</tr>
</thead>
{%- for row in doc.items -%}
<tr style="border: 1px solid black; border-collapse: collapse;">
<td style="border: 1px solid black; text-align: left;">
{{ row.item_code }}</td>
<td style="border: 1px solid black; text-align: left;">
{{ row.description }}</td>
<td style="border: 1px solid black; text-align: right;">{{ row.qty }} {{ row.uom }}</td>
<td style="border: 1px solid black; text-align: right;">{{
"{:,.2f}".format(row.rate) }}</td>
<td style="border: 1px solid black; text-align: right;">{{
"{:,.2f}".format(row.amount) }}</td>
</tr>
{%- endfor -%}
</table>
<br>
This is all I have for .css:
.print-format {
font-family: 'Tahoma';
font-size: 12px;
}
Make sure you have selected the proper paper size as well. The default is A4, in the US, we use letter.
1 Like
@sahilsuthar @volkswagner I mean take the remaining height haha. I got something working by using divs and flexbox instead of a table tag. It works in the preview but does not work in the print
Okay this works but only if it’s one page long. Otherwise if it’s two pages then it won’t work
{{ letter_head }}
{% set customer = frappe.get_doc("Customer", doc.customer) %}
{% if(doc.customer_address) %}
{% set customer_address = frappe.get_doc('Address', doc.customer_address ) %}
{% endif %}
<div style="text-align: center; font-size: 18px; font-weight: bold;">
TAX INVOICE
</div>
<hr>
<div style="text-align: center; font-size: 24px; font-weight: bold; margin-top: 10px;">
{% if doc.docstatus == 0 %}
<div style="text-align: center; font-size: 24px; font-weight: bold; margin-top: 10px;">
DRAFT
</div>
{% elif doc.docstatus == 1 %}
<div style="text-align: center; font-size: 24px; font-weight: bold; margin-top: 10px;">
SUBMITTED
</div>
{% elif doc.docstatus == 2 %}
<div style="text-align: center; font-size: 24px; font-weight: bold; margin-top: 10px;">
CANCELLED
</div>
{% endif %}
</div>
<div class="items-table mt-5">
<div class="table-header">
<div class="table-row">
<div class="table-cell">Sr</div>
<div class="table-cell">Item</div>
<div class="table-cell">Batch</div>
<div class="table-cell">Expiry</div>
<div class="table-cell">Qty</div>
<div class="table-cell">Rate</div>
<div class="table-cell">MRP</div>
<div class="table-cell">Amt</div>
<div class="table-cell">Tax</div>
<div class="table-cell">Total Amt</div>
</div>
</div>
<div class="table-body">
{% for item in doc.items %}
<div class="table-row">
<div class="table-cell">{{ loop.index }}</div>
<div class="table-cell">{{ item.item_code }}</div>
<div class="table-cell">{{ item.batch_no }}</div>
<div class="table-cell">{{ item.expiry_date or '' }}</div>
<div class="table-cell">{{ item.qty }}</div>
<div class="table-cell">{{ item.rate }}</div>
<div class="table-cell">{{ item.mrp or '' }}</div>
<div class="table-cell">{{ item.amount }}</div>
<div class="table-cell">{{ item.tax_amount or '' }}</div>
<div class="table-cell">{{ item.amount + (item.tax_amount or 0) }}</div>
</div>
{% endfor %}
<!-- Empty filler row to take the remaining space -->
<div class="filler-row">
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
<div class="table-cell" colspan="10"> </div>
</div>
</div>
</div>
.items-table {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
border: 1px solid #ddd;
flex: 1;
}
.table-header {
display: flex;
flex-direction: column;
}
.table-body {
display: flex;
flex-direction: column;
flex-grow: 1; /* Make the body grow to fill available space */
}
.table-row {
display: flex;
border-top: 1px solid #ddd;
}
.table-row:last-child {
border-bottom: none;
}
.table-body:last-child {
border-bottom: none;
}
.table-cell {
flex: 1;
padding: 8px;
border-right: 1px solid #ddd;
}
.table-cell:last-child {
border-right: none;
}
.table-header .table-cell {
background-color: #eeeeee;
font-weight: bold;
color: black;
}
/* Make the filler row take the remaining space */
.filler-row {
display: flex;
flex-grow: 1;
border-bottom: 1px solid #ddd;
}
hr {
display: block;
height: 1px;
background: transparent;
width: 100%;
border: none;
border-top: solid 1px #aaa;
}
.print-format {
display: flex;
flex: 1;
flex-direction: column;
margin-bottom: 20px;
padding: 5px;
}
