Почему определенный элемент div в заголовке перекрывает страницу в PDF-файлах в Odoo 13?

Я делаю индивидуальный отчет в формате PDF в Odoo 13 Enterprise. Я должен добавить вертикальный текст в левом поле каждой страницы отчета. Поэтому мне нужно поместить этот вертикальный текст в заголовок.

Для этого сначала я создал свой собственный формат бумаги:

<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>

Затем я изменил действие отчета, которое вызывает отчет, чтобы применить мой формат бумаги:

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

Я сделал это потому, что если я хочу писать на «полях», формат бумаги не может иметь никаких полей, чтобы не скрывать то, что я там пишу. Конечно, потом я применил левое поле ко всем основным элементам отчета. div, содержащий текст поля, противодействовал ему отрицательной абсолютной позицией.

Затем я добавил div с текстом на полях в заголовок отчета: для этого я сделал свой собственный external_layout_standard, а затем унаследовал шаблон external_layout, чтобы вызвать его (здесь я только вставляю соответствующий код):

<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>

Я определил классы в правильно загруженном файле CSS:

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;
}

Теперь проблема. Этот код отлично работает с Wkhtmltopdf 0.12.1. Но с установленным Wkhtmltopdf 0.12.5 я получаю следующее:

Почему определенный элемент div в заголовке перекрывает страницу в PDF-файлах в Odoo 13?

Как вы можете видеть, кажется, что белая div была помещена в правую часть моего поля div (красная), и эта белая div перекрывала остальную часть содержимого отчета. Однако этого не происходит, если я печатаю отчет в режиме HTML или если я печатаю его с установленным Wkhtmltopdf 0.12.1 (как я упоминал выше).

Кто-нибудь знает, почему? Любые идеи, чтобы исправить это или альтернативу для достижения моей цели?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
0
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец-то я нашел ответ на свой вопрос. Если кто-то находится в той же ситуации, что и я, ключ в том, чтобы добавить следующий стиль в ваш файл CSS:

body {
    background: transparent !important;
}

Это позволяет избежать перекрывания заголовка тела отчета. Я нашел эту строку в модуле report_qweb_pdf_watermark, кстати, это очень интересное приложение для добавления водяных знаков в отчеты в формате PDF.

Другие вопросы по теме