[Python] how fix overlapping header in odoo 17

i am working with odoo 17, i inherited the web.external_layout_stander template to add other information in the header, but the header becames long and it's overlapping the report content ... i added margin-bottom but it doesn' effect anything and when i added margin-top to the page it kinda fixed the problem but only for the first page and the next pages the header still overlap the content. i tried another aproach but still the same problem, here's my code :

<template id="custom_external_layout" inherit_id="web.external_layout_standard">
<xpath expr="//div[@t-attf-class='header o_company_#{company.id}_layout']" position="replace">

</xpath>
<xpath expr="//div[contains(@t-attf-class,'article')]" position="replace">
<style>
.parent {
padding: 20px;
}

.box-one,
.box-two {
background-color: #f2f2f2;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
}

</style>
<div class="parent">

<div t-attf-class="box-one header">
<div class="row">
<div class="col-3 mb4">
<img t-if="company.logo" t-att-src="image_data_uri(company.logo)"
style="max-height: 45px;"
alt="Logo"/>
</div>
<div class="col-9 text-end" style="margin-top:22px;" t-if="company.report_header"
t-field="company.report_header" name="moto">Company tagline
</div>
</div>
<div t-if="company.logo or company.report_header" class="row zero_min_height">
<div class="col-12">
<div style="border-bottom: 1px solid black;"/>
</div>
</div>
<div class="row">
<table style="width: 100%; margin-bottom: 1cm;">
<tr>
<!-- Company Address Cell -->
<td style="width: 50%; vertical-align: top; padding: 10px;">
<ul class="list-unstyled" name="company_address_list">
<li t-if="company.is_company_details_empty">
<span t-field="company.partner_id"
t-options='{"widget": "contact", "fields": ["address", "name"], "no_marker": true}'>
<div class="bg-light border-1 rounded h-100 d-flex flex-column align-items-center justify-content-center p-4 w-100 opacity-75 text-muted text-center">
<strong>Company address block</strong>
<div>Contains the company address.</div>
</div>
</span>
</li>
<li t-else="">
<span t-field="company.company_details">
<div class="bg-light border-1 rounded h-100 d-flex flex-column align-items-center justify-content-center p-4 w-100 opacity-75 text-muted text-center">
<strong>Company details block</strong>
<div>Contains the company details.</div>
</div>
</span>
</li>
<li t-if="not forced_vat"/>
<li t-else="">
<t t-esc="company.country_id.vat_label or 'Tax ID'">Tax ID</t>:
<span t-esc="forced_vat">US12345671</span>
</li>
<li>
<t t-if="company.partner_id.a_i">
<span>
<strong>AI:</strong>
<span t-field="company.partner_id.a_i"/>
</span>
<br/>
</t>
<t t-if="company.partner_id.company_registry">
<span>
<strong>RC:</strong>
<span t-field="company.partner_id.company_registry"/>
</span>
<br/>
</t>
<t t-if="company.partner_id.nis">
<span>
<strong>NIS:</strong>
<span t-field="company.partner_id.nis"/>
</span>
<br/>
</t>
<t t-if="company.partner_id.vat">
<span>
<strong>NIF:</strong>
<span t-field="company.partner_id.vat"/>
</span>
<br/>
</t>
</li>
</ul>
</td>
<!-- Client Info Cell -->
<td style="width: 50%; vertical-align: top; padding: 10px;">
<ul class="list-unstyled" name="client_info">
<li>
<t t-if="o and 'partner_id' in o">
<t t-if="o.partner_id">
<t t-if="o.partner_id.name">
<span>
<strong>A:</strong>
<span t-field="o.partner_id.name"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.street">
<strong>Address:</strong>
<t t-if="o.partner_id.street">
<span t-field="o.partner_id.street"/>
</t>
<t t-if="o.partner_id.city">
<span t-field="o.partner_id.city"/>,
</t>
<t t-if="o.partner_id.zip">
<span t-field="o.partner_id.zip"/>
</t>
<t t-if="o.partner_id.country_id.name">
<span t-field="o.partner_id.country_id.name"/>
</t>
<br/>
</t>
<t t-if="o.partner_id.activity">
<span>
<strong>Activité:</strong>
<span t-field="o.partner_id.activity"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.company_registry">
<span>
<strong>RC:</strong>
<span t-field="o.partner_id.company_registry"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.a_i">
<span>
<strong>A.I:</strong>
<span t-field="o.partner_id.a_i"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.vat">
<span>
<strong>NIF:</strong>
<span t-field="o.partner_id.vat"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.nis">
<span>
<strong>NIS:</strong>
<span t-field="o.partner_id.nis"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.ccp">
<span>
<strong>CCP:</strong>
<span t-field="o.partner_id.ccp"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.phone">
<span>
<strong>Téléphone:</strong>
<span t-field="o.partner_id.phone"/>
</span>
<br/>
</t>
<t t-if="o.partner_id.key_ccp">
<span>
<strong>Clé:</strong>
<span t-field="o.partner_id.key_ccp"/>
</span>
<br/>
</t>
</t>
</t>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>

<div t-attf-class="box-tow article o_report_layout_standard o_company_#{company.id}_layout {{ 'o_report_layout_background' if company.layout_background in ['Geometric', 'Custom'] else '' }}"
t-attf-style="background-image: url({{ 'data:image/png;base64,%s' % company.layout_background_image.decode('utf-8') if company.layout_background_image and company.layout_background == 'Custom' else '/base/static/img/bg_background_template.jpg' if company.layout_background == 'Geometric' else ''}});"
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')">
<div class="pt-5">
<!-- This div ensures that the address is not cropped by the header. -->
<t t-call="web.address_layout"/>
</div>
<t t-out="0"/>
</div>
</div>
</xpath>

</template>

Continue reading...