Ir al contenido
Menú
Se marcó esta pregunta

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
Descartar
Mejor respuesta

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
Descartar
Publicaciones relacionadas Respuestas Vistas Actividad
0
may 24
1892
2
may 24
3689
3
feb 24
3173
2
nov 22
6008
0
jun 20
2652