I have an Issue with the Odoo PDF rendering of the Invoice App. Problem is that my header and the main content are overlapping each other when rendered as PDF. Also the footer gets cut off.
I've managed via the developer mode to create a copy of the external_layout_standard, modify it and set it as document layout in the general settings. It looks good in the web view but as soon as I try to render the PDF-file things get weird.
I think Odoo uses wkhtmltopdf if that information is any helpful.
The Template I use
<?xml version="1.0"?>
<t t-name="web.my_custom_layout">
<div t-attf-class="header">
<div class="row text-right">
<div class="col-12">
<img t-if="company.logo" t-att-src="image_data_uri(company.logo)" style="max-width: 300px; margin-right: 50px" alt="Logo"/>
</div>
</div>
<br/>
<div class="row">
<div class="col-8" style="margin-top: 50px">
<ul class="list-inline">
<li t-if="company.name" class="list-inline-item"><span t-field="company.name"/>,</li>
<li t-if="company.street" class="list-inline-item"><span t-field="company.street"/>,</li>
<li t-if="company.zip and company.city" class="list-inline-item"><span t-field="company.zip"/> <span t-field="company.city"/></li>
</ul>
<t t-if="address">
<div class="address row">
<div name="address" class="col-12">
<t t-raw="address"/>
</div>
</div>
</t>
</div>
<div class="col-4">
<div class="row">
<div class="col-12" name="company_address">
<div t-field="company.partner_id"
t-options="{'widget': 'contact', 'fields': ['address', 'name'], 'no_marker': true}"/>
</div>
</div>
<br/>
<div class="row">
<div class="col-12" name="company_phone">
Telefon
<div t-field="company.partner_id"
t-options="{'widget': 'contact', 'fields': ['phone'], 'no_marker': true}"/>
</div>
</div>
<br/>
<div class="row">
<div class="col-12">
<p>
buchhaltung<br/>
@my-company.com
</p>
</div>
</div>
<br/>
<div class="row">
<div class="col-12">
<div t-if="company.vat">Steuer-Nr.: <strong t-field="company.vat"/><br/></div>
<div>UStID-Nr.: <strong>XXXXXXXXXXX</strong><br/></div>
</div>
</div>
</div>
</div>
</div>
<div t-attf-class="article"
t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id"
t-att-data-oe-lang="o and o.env.context.get('lang')">
<t t-raw="0"/>
</div>
<div t-attf-class="footer">
<div style="border-top: 1px solid black; padding-top: 20px">
<div name="financial_infos">
<span t-field="company.report_footer"/>
</div>
<div t-if="company.name" class="row">
<div class="col-4">Zahlungsempfänger</div>
<div class="col-8"><span t-field="company.name"/></div>
</div>
<div class="row">
<div class="col-4">Bankverbindung</div>
<div class="col-8">XXXXXXXXXXXXXXXX</div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8">BIC XXXXXXXXXXX, IBAN XXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<div class="row">
<div class="col-4">Bankverbindung</div>
<div class="col-8">XXXXXXXX XXXXXXXX</div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8">BIC XXXXXXXX, IBAN XXXXXXXXXXXXXXXXXXXXXX</div>
</div>
<br/>
<div class="row">
<div class="col-4"><strong>Geschäftsführung</strong></div>
<div t-if="company.company_registry" class="col-8"><strong>Registergericht/Nr.</strong></div>
</div>
<div class="row">
<div class="col-4">Here goes CEO</div>
<div t-if="company.company_registry" class="col-8"><span t-field="company.company_registry"/></div>
</div>
<div t-if="report_type == 'pdf'" class="text-muted">
Page: <span class="page"/> / <span class="topage"/>
</div>
</div>
</div>
</t>
In web view everything is fine: Invoice how it's supposed to look
In the PDF-file all information are there but gets overlapped by the header
PDF-file
Screenshot of PDF-file
There were some steps I already tried:
I am thankful for any help
Thanks to @CZoellner I could fix it with editing the format settings under General Settings > Business Documents > Format.
Just added some Top and Bottom margin and it was fixed
