Why a specific div in the header is overlaping the page in PDFs in Odoo 13?

Question

I am making a customized PDF report in Odoo 13 Enterprise. I have to add a vertical text in the left margin of each page of the report. So I need to put that vertical text in the header.

To do that, first I created my own paperformat:

<record id="my_paperformat_euro" model="report.paperformat">
    <field name="name">My European A4</field>
    <field name="default" eval="False" />
    <field name="format">A4</field>
    <field name="orientation">Portrait</field>
    <field name="margin_top">35</field>
    <field name="margin_bottom">18</field>
    <field name="margin_left">0</field>
    <field name="margin_right">0</field>
    <field name="header_line" eval="False" />
    <field name="header_spacing">30</field>
</record>

Then I modified the report action which calls the report to apply my paperformat:

<record id="sale.action_report_saleorder" model="ir.actions.report">
    <field name="paperformat_id" ref="my_module.my_paperformat_euro"/>
</record>

I did this because if I want to write in "margins", the paperformat cannot have any margin in order not to hide what I write there. Of course then I applied a left margin to all the main elements of the report. The div cointaining the margin text counteracted it with a negative absolute position.

Then I added the div with the margin text in the report header: to do that I did my own external_layout_standard and then I inherited the external_layout template in order to call it (I only paste the relevant code here):

<template id="external_layout_standard">
    <!-- HEADER -->
    <div t-attf-class="header o_company_#{company.id}_layout o_my_special_page" t-att-style="report_header_style">
        ...
        <div class="o_my_margin text-muted">
            <span t-if="company.vat">CIF: <span t-field="company.vat"/></span>
            <span t-if="company.vat and company.company_registry"> | </span>
            <span t-if="company.company_registry" t-field="company.company_registry"/>
        </div>
    </div>
    ...
    <!-- BODY -->
    ...
    <!-- FOOTER -->
    ...
</template>

I defined the classes in a CSS file which is correctly loaded:

div.o_my_special_page {
    margin-left: 15mm !important;
    margin-right: 15mm !important;
}

div.o_my_margin {
    position: absolute;
    top: 85mm;
    left: -65mm;
    z-index: -50147483647;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    font-size: 8pt;
    float: left;
    width: 150mm;
    height: 15mm;
    background: red;
}

Now, the problem. This code works perfectly with Wkhtmltopdf 0.12.1. But, with Wkhtmltopdf 0.12.5 installed, I get this:

As you can see, it seems as if a white div was put on the right part of my margin div (the red one), and this white div was overlaping the rest of the report content. However, this does not happen if I print the report in HTML mode or if I print it with Wkhtmltopdf 0.12.1 installed (as I've mentioned above).

Does anyone know why? Any ideas to fix this or an alternative one to achieve my purpose?

Answer 1

Finally I've found the answer to my own question. If anyone is in the same situation as I was, the key is to add the following style to your CSS file:

body {
    background: transparent !important;
}

That avoids header to overlap report body. I've found this line in the module report_qweb_pdf_watermark, which by the way it is a very interesting app to add watermarks to PDF reports.

NOTE: Do not apply that style to the body in previous versions of Wkhtmltopdf 0.12.5. It will work without the style, and besides, if you apply it, you will get the same problem as Wkhtmltopdf 0.12.5 without applying the style.