Skip to Content
Odoo Menu
  • Zaloguj się
  • Wypróbuj za darmo
  • Aplikacje
    Finanse
    • Księgowość
    • Fakturowanie
    • Wydatki
    • Arkusz kalkulacyjny (BI)
    • Dokumenty
    • Podpisy
    Sprzedaż
    • CRM
    • Sprzedaż
    • PoS Sklep
    • PoS Restauracja
    • Subskrypcje
    • Wypożyczalnia
    Strony Internetowe
    • Kreator Stron Internetowych
    • eCommerce
    • Blog
    • Forum
    • Czat na Żywo
    • eLearning
    Łańcuch dostaw
    • Magazyn
    • Produkcja
    • PLM
    • Zakupy
    • Konserwacja
    • Jakość
    Zasoby Ludzkie
    • Pracownicy
    • Rekrutacja
    • Urlopy
    • Ocena pracy
    • Polecenia Pracownicze
    • Flota
    Marketing
    • Marketing Społecznościowy
    • E-mail Marketing
    • SMS Marketing
    • Wydarzenia
    • Automatyzacja Marketingu
    • Ankiety
    Usługi
    • Projekt
    • Ewidencja czasu pracy
    • Usługi Terenowe
    • Helpdesk
    • Planowanie
    • Spotkania
    Produktywność
    • Dyskusje
    • Zatwierdzenia
    • IoT
    • VoIP
    • Baza wiedzy
    • WhatsApp
    Aplikacje trzecich stron Studio Odoo Odoo Cloud Platform
  • Branże
    Sprzedaż detaliczna
    • Księgarnia
    • Sklep odzieżowy
    • Sklep meblowy
    • Sklep spożywczy
    • Sklep z narzędziami
    • Sklep z zabawkami
    Żywienie i hotelarstwo
    • Bar i Pub
    • Restauracja
    • Fast Food
    • Pensjonat
    • Dystrybutor napojów
    • Hotel
    Agencja nieruchomości
    • Agencja nieruchomości
    • Biuro architektoniczne
    • Budowa
    • Zarządzanie nieruchomościami
    • Ogrodnictwo
    • Stowarzyszenie właścicieli nieruchomości
    Doradztwo
    • Biuro księgowe
    • Partner Odoo
    • Agencja marketingowa
    • Kancelaria prawna
    • Agencja rekrutacyjna
    • Audyt i certyfikacja
    Produkcja
    • Tekstylia
    • Metal
    • Meble
    • Jedzenie
    • Browar
    • Prezenty firmowe
    Zdrowie & Fitness
    • Klub sportowy
    • Salon optyczny
    • Centrum fitness
    • Praktycy Wellness
    • Apteka
    • Salon fryzjerski
    Transakcje
    • Złota rączka
    • Wsparcie Sprzętu IT
    • Systemy energii słonecznej
    • Szewc
    • Firma sprzątająca
    • Usługi HVAC
    Inne
    • Organizacja non-profit
    • Agencja Środowiskowa
    • Wynajem billboardów
    • Fotografia
    • Leasing rowerów
    • Sprzedawca oprogramowania
    Przeglądaj wszystkie branże
  • Community
    Ucz się
    • Samouczki
    • Dokumentacja
    • Certyfikacje
    • Szkolenie
    • Blog
    • Podcast
    Pomóż w nauce innym
    • Program Edukacyjny
    • Scale Up! Gra biznesowa
    • Odwiedź Odoo
    Skorzystaj z oprogramowania
    • Pobierz
    • Porównaj edycje
    • Wydania
    Współpracuj
    • Github
    • Forum
    • Wydarzenia
    • Tłumaczenia
    • Zostań partnerem
    • Usługi dla partnerów
    • Zarejestruj swoją firmę rachunkową
    Skorzystaj z usług
    • Znajdź partnera
    • Znajdź księgowego
    • Spotkaj się z doradcą
    • Usługi wdrożenia
    • Opinie klientów
    • Wsparcie
    • Aktualizacje
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Zaplanuj demo
  • Cennik
  • Pomoc

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • CRM
  • e-Commerce
  • Księgowość
  • Zapasy
  • PoS
  • Projekt
  • MRP
All apps
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
Wszystkie posty Osoby Odznaki
Tagi (Zobacz wszystko)
odoo accounting v14 pos v15
O tym forum
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
Wszystkie posty Osoby Odznaki
Tagi (Zobacz wszystko)
odoo accounting v14 pos v15
O tym forum
Pomoc

Custom qweb report with css not working

Zaprenumeruj

Otrzymaj powiadomienie o aktywności w tym poście

To pytanie dostało ostrzeżenie
pdfqwebreportv9odooV9
2 Odpowiedzi
25452 Widoki
Awatar
Emanuel Cino

0 down vote \favorite

I'm creating a new report on Odoo 9 which uses css styles in order to position text over a background image. The image is in background and occupies the full A4 page without any margins.

In html, it's working fine. However, when I print the report to PDF, I have blank margins at left and right, and the text goes below the background image. It seems that the CSS rules are not applied. Do you find any solution for making it working in PDF?

Here is my report:

<template id="sub_proposal">
<style type="text/css">
.container {
padding: 0mm;
}
#sponsor-ref {
position: absolute;
top: 84mm;
left: 45mm;
}
#form_image {
position: absolute;
top: 0mm;
left: 0mm;
width: 210mm;
height: 297mm;
}
#form_image img {
max-width: 100%;
max-height: 100%;
margin: auto;
}
</style>
<t t-call="report.html_container">
<t t-foreach="docs" t-as="o">
<div class="page">
<div id="form_image">
<span t-field="o.sub_proposal_form" t-field-options='{"widget": "image"}'/>
</div>
<span id="sponsor-ref" t-field="o.ref"/>
</div>
</t>
</t>
</template>
2
Awatar
Odrzuć
Awatar
Travis Waelbroeck
Najlepsza odpowiedź

The style tag and contents must be set within the <div class="page"> element.

I don't have any documentation, only from experience.
\Link to same question on Stack Overflow.

5
Awatar
Odrzuć
Emanuel Cino
Autor

Thanks, this resolved my issue! Somehow, css style in the head section is ignored in PDF.

Emanuel Cino
Autor

As well, it seems less optimized to load the style at each new page, so I wonder if there would be a solution allowing to declare only once the style.

Awatar
Chandran N Nepolean
Najlepsza odpowiedź

Hi cino,

<template id="style_plain">

  <style type="text/css">

   .address {

    background-color:yellow!important;

                                           color:green!important;

                                 }

  </style>

 </template>

  <template id="html_container_plain">

   <t t-call="report.html_container">

    <t t-raw="0" />

   </t>

   <xpath expr="//head" position="inside">

    <t t-call="plain_reports.style_plain" />

   </xpath>

  </template>

This sample should work. Please modify according to your needs. your code missed xpath header section that is important because it will add your css in header then only your pdf will take those styles



Thanks

Chandran Nepolean

1
Awatar
Odrzuć
Emanuel Cino
Autor

Sorry but it does produce the exact same result as I mentioned. It seems that PDF generation does not take into account css style in the head section because answer from Travis who proposes to put the style inside the page does make it work.

Chandran N Nepolean

Have you created two templates sepeartely one for css and other for design?

Chandran N Nepolean

if you followed this example.. please past your code here..it will be easy to debug

Emanuel Cino
Autor

Yes I separated the templates. Here was my code :

<template id="style">

<!-- Add report style -->

<style type="text/css">

.container {

padding: 0mm;

}

#sponsor-ref {

position: absolute;

top: 84mm;

left: 45mm;

}

#form_image {

position: absolute;

top: 0mm;

left: 0mm;

width: 210mm;

height: 297mm;

}

#form_image img {

max-width: 100%;

max-height: 100%;

margin: auto;

}

</style>

</template>

<template id="html_container">

<t t-call="report.html_container">

<t t-raw="0"/>

</t>

<xpath expr="//head" position="inside">

<t t-call="report_custom.style"/>

</xpath>

</template>

<template id="sub_proposal">

<t t-call="report_custom.html_container">

<t t-foreach="docs" t-as="o">

<div class="page">

<div id="form_image">

<span t-field="o.sub_proposal_form" t-field-options='{"widget": "image"}'/>

</div>

<t t-if="o.lang in ('en_US', 'it_IT')">

<span id="sponsor-ref" t-field="o.ref"/>

</t>

<t t-if="o.lang in ('fr_CH', 'de_DE')">

<span id="sponsor-ref" t-field="o.ref" style="top: 88mm;"/>

</t>

</div>

</t>

</t>

</template>

Chandran N Nepolean

Please try this

<template id="style">

<!-- Add report style -->

<style type="text/css">

.container {

padding: 0mm;

}

#sponsor-ref {

position: absolute;

top: 84mm;

left: 45mm;

}

#form_image {

position: absolute;

top: 0mm;

left: 0mm;

width: 210mm;

height: 297mm;

}

#form_image img {

max-width: 100%;

max-height: 100%;

margin: auto;

}

</style>

</template>

<template id="sub_proposal">

<xpath expr="//head" position="inside">

<t t-call="report_custom.style"/>

</xpath>

<t t-call="report_custom.html_container">

<t t-foreach="docs" t-as="o">

<div class="page">

<div id="form_image">

<span t-field="o.sub_proposal_form" t-field-options='{"widget": "image"}'/>

</div>

<t t-if="o.lang in ('en_US', 'it_IT')">

<span id="sponsor-ref" t-field="o.ref"/>

</t>

<t t-if="o.lang in ('fr_CH', 'de_DE')">

<span id="sponsor-ref" t-field="o.ref" style="top: 88mm;"/>

</t>

</div>

</t>

</t>

</template>

Chandran N Nepolean

If you still could not got working..Please follow below link

https://github.com/suhe/odoo/blob/149a84c2472a0b17c79f6fc4f299ee5daae70833/addons/sample_qweb_report/report/product_template_report_templates.xml

it will show you how to deal with css and report

Emanuel Cino
Autor

Sorry, still not. If I change

<xpath expr="//head" position="inside">

<t t-call="report_custom.style"/>

</xpath>

by just calling the style

<t t-call="report_custom.style"/>

after <div class="page">, it works. Must be PDF limitations as your solution works in HTML but not in PDF.

Chandran N Nepolean

Hi Cino,

Please give last try this one..

so change path here <xpath expr="//div[@class='page']" position="after">

Podoba Ci się ta dyskusja? Dołącz do niej!

Stwórz konto dzisiaj, aby cieszyć się ekskluzywnymi funkcjami i wchodzić w interakcje z naszą wspaniałą społecznością!

Zarejestruj się
Powiązane posty Odpowiedzi Widoki Czynność
Conditional column on table
pdf qweb report
Awatar
0
maj 24
2754
Change font in QWeb template
pdf qweb report
Awatar
Awatar
Awatar
2
maj 24
4991
Sale Order PDF Report Rozwiązane
pdf qweb report
Awatar
Awatar
Awatar
Awatar
3
lut 24
4331
[ODOO 15] PDF in Qweb Report
pdf qweb report
Awatar
Awatar
Awatar
2
lis 22
6976
Invoice on basic layout
pdf invoice qweb report
Awatar
0
kwi 24
2711
Społeczność
  • Samouczki
  • Dokumentacja
  • Forum
Open Source
  • Pobierz
  • Github
  • Runbot
  • Tłumaczenia
Usługi
  • Hosting Odoo.sh
  • Wsparcie
  • Aktualizacja
  • Indywidualne rozwiązania
  • Edukacja
  • Znajdź księgowego
  • Znajdź partnera
  • Zostań partnerem
O nas
  • Nasza firma
  • Zasoby marki
  • Skontaktuj się z nami
  • Oferty pracy
  • Wydarzenia
  • Podcast
  • Blog
  • Klienci
  • Informacje prawne • Prywatność
  • Bezpieczeństwo Odoo
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo to pakiet aplikacji biznesowych typu open source, które zaspokoją wszystkie potrzeby Twojej firmy: CRM, eCommerce, księgowość, inwentaryzacja, punkt sprzedaży, zarządzanie projektami itp.

Unikalną wartością Odoo jest to, że jest jednocześnie bardzo łatwe w użyciu i w pełni zintegrowane.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now