Pular para o conteúdo
Menu
Esta pergunta foi sinalizada
1 Responder
82 Visualizações

Hello,

I am building a custom PDF report in Odoo (v18) using QWeb.

  • I defined a custom report.paperformat (A4, portrait) with correct margins, so my header is aligned properly.
  • The problem:
    • I want the invoice lines table to stretch and fill the available vertical space until the bottom of the page.
    • I also need to position a declaration/div block always at the bottom of the last page, just above the footer.
  • When I tried using Bootstrap flex / CSS positioning, it didn’t apply in the PDF output (because Odoo uses wkhtmltopdf with limited CSS support).

<div class="page">
   <!-- Header (works fine) -->

   <table class="inv-tbl">
      <!-- invoice lines -->
   </table>

   <!-- I want this block always pushed to bottom -->
   <div class="declaration">
      Company Declaration and Bank Details
   </div>
</div>


What I tried:

  • Flexbox and min-height:100% → not applied.
  • Absolute positioning with bottom:0 → overlaps table content.
  • Adjusting paperformat margins → helps only for header, not for body stretching.


So,

What is the recommended approach in Odoo QWeb reports to:

  1. Stretch a table so it occupies remaining height,
  2. Always push a block (div) to the bottom of the last page (above footer)?

Any examples or best practices would be appreciated.

Avatar
Cancelar
Melhor resposta

Hi,



For the table (invoice lines) to stretch and fill remaining vertical space in Odoo PDF reports:


Wrap the whole page in a container with display: table; height: 100%, then put the invoice lines inside a display: table-row; height: 100%.


Example:


<div style="display: table; width: 100%; height: 100%;">

    <div style="display: table-row; height: 100%;">

        <table class="inv-tbl" style="width:100%;">

            <!-- invoice lines -->

        </table>

    </div>

</div>



This makes the invoice lines table expand automatically to use the available vertical space between header and footer.



To print the header/footer only on the first/last page, you can use the OCA module.


* https://odoo-community.org/shop/report-qweb-element-page-visibility-2192


After installing the module, use the first-page or last-page class.


Header


<div class="header">

    <div class="first-page">

        <div class="row">

            <img t-if="company.custom_report_header"

                 t-att-src="image_data_uri(company.custom_report_header)"

                 alt="Logo" width="100%"/>

        </div>

    </div>

</div>



Footer.


<div class="footer o_standard_footer">

    <div class="last-page">

        <div style="width: 100%;">

             <img t-if="company.custom_report_footer"

             t-att-src="image_data_uri(company.custom_report_footer)"

             alt="Logo" width="100%"/>

          </div>


      </div

</div>



Hope it helps



Avatar
Cancelar
Publicações relacionadas Respostas Visualizações Atividade
0
mai. 24
1891
2
mai. 24
3689
3
fev. 24
3172
2
nov. 22
6007
0
jun. 20
2652