I realized that the HTML print format or PDF print format left a big space at the top and bottom for paper. Trying to do some setting for css, however, still left a big spacing for header. Any idea where to fix this ?
Hi @alan,
try this CSS:
.print-format {
margin-top: 0mm;
margin-left: 0mm;
margin-right: 0mm;
margin-bottom: 0mm;
}
If it does not work, it might be related to this: PDF: margin not used from CSS · Issue #4972 · frappe/frappe · GitHub
Maybe you can share a screenshot?
1 Like
Hi,
I’m using a HTML custom print format.
I try to do some custom css, however, I found out that custom css doesn’t work for custom html print format. Anyone kindly correct me or comment if what I mentioned is wrong …
I need a footer to fix at the bottom of Letter Half Paper, but it will change by follow the number of row. Any solutions ?
Hi @alan,
normally, the custom CSS should work. There are several cases, where there are !important or inline styles set, which causes the CSS-commands to be overwritten (e.g. font size in the pdf). I know this is not nice, but in this case, again overwrite with !important.
To create a footer, something like this should do (in the custom html section):
<div id="footer-html" class="visible-pdf">
<p class="text-center small page-number visible-pdf">Page <span class="page"></span> of <span class="topage"></span></p>
</div>
Hope this helps…
Hi,
Possible to look at the following html print format,
Every page I print would have different footer location for different item row.
Wondering which part did wrongly.
{%- macro add_header(page_num, max_pages, doc, letter_head, no_letterhead) -%}
{% if letter_head and not no_letterhead %}
<div class="letter-head" spacing="none">{{ letter_head }}</div>
{% endif %}
{% if doc.print_heading_template %}
{{ frappe.render_template(doc.print_heading_template, {"doc":doc}) }}
{% else %}
<div>
<h2>{{ doc.select_print_heading or (doc.print_heading if doc.print_heading != None
else _(doc.doctype)) }}
<small>{{ doc.sub_heading if doc.sub_heading != None
else doc.name }}</small>
</h2>
</div>
{% endif %}
{%- if doc.meta.is_submittable and doc.docstatus==0-%}
<div class="alert alert-info text-center">
<h4 style="margin: 0px;">{{ _("DRAFT") }}</h4></div>
{%- endif -%}
{%- if doc.meta.is_submittable and doc.docstatus==2-%}
<div class="alert alert-danger text-center">
<h4 style="margin: 0px;">{{ _("CANCELLED") }}</h4></div>
{%- endif -%}
{% if max_pages > 1 %}
<p class="text-right">{{ _("Page #{0} of {1}").format(page_num, max_pages) }}</p>
{% endif %}
{%- endmacro -%}
{%- from "templates/print_formats/standard_macros.html" import add_header2, add_header,
render_field, add_foot -%}
{# {{ add_header(0,1,doc,letter_head, no_letterhead) }} #}
{% if letter_head and not no_letterhead %}
<div>
<div class="letter-head">{{ letter_head }}</div>
</div>
{% endif %}
<big>
<p class="text-center"><b>{{ _("Sales Order") }}</b></p><br>
</big>
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5 text-left"><font size="2px"><b>Customer Name</b></font></div>
<div class="col-xs-7 ">{{ doc.customer }}</div>
</div>
<div class="row">
<div class="col-xs-5 text-left"><b><b>Address</b></div>
<div class="col-xs-7 "><b>{{ doc.address_display or ''}}</b></div>
</div>
<div class="row">
<div class="col-xs-5 text-left"><b>Contact</b></div>
<div class="col-xs-7 ">{{ doc.contact_display or ''}}</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5 text-left"><b><b>Order No</b></div>
<div class="col-xs-7">{{ doc.name or ''}}</div>
</div>
<div class="row">
<div class="col-xs-5 text-left"><b>Date</b></div>
<div class="col-xs-7 ">
{{ doc.get_formatted("transaction_date") or ''}}</div>
</div>
{%- if doc.po_no -%}
<div class="row">
<div class="col-xs-5 text-left"><b>Reference</b></div>
<div class="col-xs-7 ">{{ doc.po_no or ''}}</div>
</div>
{%- endif -%}
{%- if doc.po_date -%}
{%- endif -%}
{%- for row in doc.sales_team -%}
<div class="row">
<div class="col-xs-5 text-left"><b>Salesman</b></div>
<div class="col-xs-7 ">{{ row.sales_person or ''}}</div>
</div>
{%- endfor -%}
</div>
</div>
{%- set n = 5 -%}
{%- set page = 0 -%}
<table class="table" style="line-height: 10px; font-weight:normal;">
<tbody>
<tr>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">No</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Item</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Description</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Qty</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Price In. GST</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Sub-Total Ex. GST</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">GST Amount</td>
<td td style="border-top: 1px solid black; border-bottom: 1px solid black;"class="text-right">Total (RM)</td>
</tr>
{%- if (doc.items|length <= n) -%}
{%- set page_size = 1 -%}
{%- elif ((doc.items|length > n) and (doc.items|length <= (n*2))) -%}
{%- set page_size = 2 -%}
{%- elif ((doc.items|length % n == 0)) -%}
{%- set page_size = doc.items|length // n -%}
{% else %}
{%- set page_size = (doc.items|length // n)+1 -%}
{%- endif -%}
{%- for i in range(0,page_size * n) -%}
{%- set row = doc.items[i] -%}
{% if row != null -%}
<tr height="5%">
<td style="width: 2%; border-style: none;">{{ row.idx }}</td>
<td style="width: 15%; text-align: left; border-style: none;">{{ row.item_code}} </td>
<td style="width: 28%; text-align: left; border-style: none;">{{ row.description }} </td>
<td style="width: 5%; text-align: center; border-style: none;">{{ row.qty }} </td>
<td style="width: 10%; text-align: right; border-style: none;">
{{ '%0.2f'| format(row.rate|float)}}</td>
<td style="width: 10%; text-align: right; border-style: none;">{{ '%0.2f'| format(row.net_amount|round(2,'ceil')) }} </td>
<td style="width: 15%; text-align: right; border-style: none;">{{'%0.2f'| format( row.amount - row.net_amount|round(2,'ceil')) }}</td>
<td style="width: 15%; text-align: right; border-style: none;">{{ row.get_formatted("amount", doc)}}</td>
</tr>
{% else %}
<tr style="width: 100%; text-align: right; border-style: none;">
</tr>
{%- endif -%}
<!-- page-break here -->
{% if ((i+1) >= n) and ((i+1) % n == 0) and ((i+1) < doc.items|length) -%}
{%- set page = page + 1 -%}
</tbody>
</table>
<div id="footer-html">
{% if not no_letterhead and footer %}
<div class="letter-head-footer">{{ footer }}</div>
{% endif %}
</div>
<div class="page-break">
</div>
{% if letter_head and not no_letterhead %}
<div class="letter-head">{{ letter_head }}</div>
{% endif %}
<big>
<p class="text-center"><b>{{ _("Sales Order") }}</b></p><br>
</big>
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5 text-right"><b>Customer Name</b></div>
<div class="col-xs-7 ">{{ doc.customer }}</div>
</div>
<div class="row">
<div class="col-xs-5 text-right"><b>Address</b></div>
<div class="col-xs-7 ">{{ doc.address_display or ''}}</div>
</div>
<div class="row">
<div class="col-xs-5 text-right"><b>Contact</b></div>
<div class="col-xs-7 ">{{ doc.contact_display or ''}}</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-5 text-right"><b>Order No</b></div>
<div class="col-xs-7 ">{{ doc.name or ''}} </div>
</div>
<div class="row">
<div class="col-xs-5 text-right"><b>Date</b></div>
<div class="col-xs-7 ">{{ doc.get_formatted("transaction_date") or ''}}</div>
</div>
{%- if doc.po_no -%}
<div class="row">
<div class="col-xs-5 text-right"><b>Reference</b></div>
<div class="col-xs-7 ">{{ doc.po_no or ''}}</div>
</div>
{%- endif -%}
{%- if doc.po_date -%}
<div class="row">
<div class="col-xs-5 text-right"><b>PO Date</b></div>
<div class="col-xs-7 ">
{{ doc.get_formatted("po_date") or ''}}</div>
</div>
{%- endif -%}
{%- for row in doc.sales_team -%}
<div class="row">
<div class="col-xs-5 text-right"><b>Salesman</b></div>
<div class="col-xs-7 ">{{ row.sales_person or ''}}</div>
</div>
{%- endfor -%}
</div>
</div>
<!-- Items table header -->
<table class="table" style="line-height: 10px; font-weight:normal;">
<tr>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">No</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Item</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Description</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Qty</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Price In GST</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">Sub-Total Ex GST</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">GST Amount</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;" class="text-right">Total (RM)</td>
</tr>
{%- endif -%}
{%- endfor -%}
</tbody>
</table>
<div class="row">
<hr width="100%"; color="black"; >
</div>
<div class="row">
<div class="col-xs-6">
<div>
{{ _("Total :" " ") }}
{{ doc.in_words or '' }}
</div>
<div>
<b>{{ _("Payment Info : ") }}</b>
<b>{{ doc.get_formatted('advance_paid' or '') }}</b>
</div>
<div class="row">
<div class="col-xs-12">
<b>{{ _("Remarks : ") }}</b>
{{ doc.remark or '' }}
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-right"></div>
<div class="col-xs-4 text-right">{{ _("Net Total") }}</div>
<div class="col-xs-2 ">{{ doc.get_formatted("total") or '' }}</div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-4 text-right">{{ _("GST") }} </div>
<div class="col-xs-2 ">{%- for row in doc.taxes -%}{{ row.description }} : {{ row.rate }} %{{ '%0.2f'| format(row.tax_amount) }}{%- endfor -%} </div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-4 text-right">{{ _("Grand Total") }}</div>
<div class="col-xs-2 ">{{ doc.get_formatted("grand_total") or '' }} </div>
</div>
</div>
<div id="footer-html">
{% if not no_letterhead and footer %}
<div class="letter-head-footer">{{ footer }}</div>
{% endif %}
</div>
{%- from "templates/print_formats/standard_macros.html" import add_header,
render_field -%}