Zum Inhalt springen
Odoo Menü
  • Anmelden
  • Jetzt gratis testen
  • Apps
    Finanzen
    • Buchhaltung
    • Rechnungsstellung
    • Spesenabrechnung
    • Tabellenkalkulation (BI)
    • Dokumente
    • E-Signatur
    Vertrieb
    • CRM
    • Vertrieb
    • Kassensystem – Shop
    • Kassensystem – Restaurant
    • Abonnements
    • Vermietung
    Websites
    • Website-Builder
    • E-Commerce
    • Blog
    • Forum
    • Livechat
    • E-Learning
    Lieferkette
    • Lager
    • Fertigung
    • PLM
    • Einkauf
    • Wartung
    • Qualität
    Personalwesen
    • Mitarbeiter
    • Personalbeschaffung
    • Abwesenheiten
    • Mitarbeiterbeurteilung
    • Personalempfehlungen
    • Fuhrpark
    Marketing
    • Social Marketing
    • E-Mail-Marketing
    • SMS-Marketing
    • Veranstaltungen
    • Marketing-Automatisierung
    • Umfragen
    Dienstleistungen
    • Projekte
    • Zeiterfassung
    • Außendienst
    • Kundendienst
    • Planung
    • Termine
    Produktivität
    • Dialog
    • Genehmigungen
    • IoT
    • VoIP
    • Wissensdatenbank
    • WhatsApp
    Apps von Drittanbietern Odoo Studio Odoo Cloud-Plattform
  • Branchen
    Einzelhandel
    • Buchladen
    • Kleidergeschäft
    • Möbelhaus
    • Lebensmittelgeschäft
    • Baumarkt
    • Spielwarengeschäft
    Essen & Gastgewerbe
    • Bar und Kneipe
    • Restaurant
    • Fast Food
    • Gästehaus
    • Getränkehändler
    • Hotel
    Immobilien
    • Immobilienagentur
    • Architekturbüro
    • Baugewerbe
    • Immobilienverwaltung
    • Gartenarbeit
    • Eigentümervereinigung
    Beratung
    • Buchhaltungsfirma
    • Odoo-Partner
    • Marketingagentur
    • Anwaltskanzlei
    • Talentakquise
    • Prüfung & Zertifizierung
    Fertigung
    • Textil
    • Metall
    • Möbel
    • Speisen
    • Brauerei
    • Firmengeschenke
    Gesundheit & Fitness
    • Sportklub
    • Brillengeschäft
    • Fitnessstudio
    • Therapeut
    • Apotheke
    • Friseursalon
    Handel
    • Handyman
    • IT-Hardware & -Support
    • Solarenergiesysteme
    • Schuster
    • Reinigungsdienstleistungen
    • HLK-Dienstleistungen
    Sonstiges
    • Gemeinnützige Organisation
    • Umweltschutzagentur
    • Plakatwandvermietung
    • Fotostudio
    • Fahrrad-Leasing
    • Software-Händler
    Alle Branchen ansehen
  • Community
    Lernen
    • Tutorials
    • Dokumentation
    • Zertifizierungen
    • Schulung
    • Blog
    • Podcast
    Bildung fördern
    • Bildungsprogramm
    • Scale-Up! Planspiel
    • Odoo besuchen
    Software anfragen
    • Herunterladen
    • Editionen vergleichen
    • Releases
    Zusammenarbeiten
    • Github
    • Forum
    • Veranstaltungen
    • Übersetzungen
    • Partner werden
    • Dienstleistungen für Partner
    • Buchhaltungsfirma registrieren
    Services anfragen
    • Partner finden
    • Buchhalter finden
    • Einen Experten treffen
    • Implementierungsservices
    • Kundenreferenzen
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Eine Demo erhalten
  • Preiskalkulation
  • Hilfe

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

  • CRM
  • e-Commerce
  • Buchhaltung
  • Lager
  • PoS
  • Projekte
  • MRP
All apps
Sie müssen registriert sein, um mit der Community zu interagieren.
Alle Beiträge Personen Abzeichen
Stichwörter (Alle anzeigen)
odoo accounting v14 pos v15
Über dieses Forum
Sie müssen registriert sein, um mit der Community zu interagieren.
Alle Beiträge Personen Abzeichen
Stichwörter (Alle anzeigen)
odoo accounting v14 pos v15
Über dieses Forum
Hilfe

Custom qweb report with css not working

Abonnieren

Erhalten Sie eine Benachrichtigung, wenn es eine Aktivität zu diesem Beitrag gibt

Diese Frage wurde gekennzeichnet
pdfqwebreportv9odooV9
2 Antworten
25444 Ansichten
Avatar
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
Avatar
Verwerfen
Avatar
Travis Waelbroeck
Beste Antwort

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
Avatar
Verwerfen
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.

Avatar
Chandran N Nepolean
Beste Antwort

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
Avatar
Verwerfen
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">

Diskutieren Sie gerne? Treten Sie bei, statt nur zu lesen!

Erstellen Sie heute ein Konto, um exklusive Funktionen zu nutzen und mit unserer tollen Community zu interagieren!

Registrieren
Verknüpfte Beiträge Antworten Ansichten Aktivität
Conditional column on table
pdf qweb report
Avatar
0
Mai 24
2749
Change font in QWeb template
pdf qweb report
Avatar
Avatar
Avatar
2
Mai 24
4985
Sale Order PDF Report Gelöst
pdf qweb report
Avatar
Avatar
Avatar
Avatar
3
Feb. 24
4323
[ODOO 15] PDF in Qweb Report
pdf qweb report
Avatar
Avatar
Avatar
2
Nov. 22
6975
Invoice on basic layout
pdf invoice qweb report
Avatar
0
Apr. 24
2707
Community
  • Tutorials
  • Dokumentation
  • Forum
Open Source
  • Herunterladen
  • Github
  • Runbot
  • Übersetzungen
Dienstleistungen
  • Odoo.sh-Hosting
  • Support
  • Upgrade
  • Individuelle Entwicklungen
  • Bildung
  • Buchhalter finden
  • Partner finden
  • Partner werden
Über uns
  • Unsere Firma
  • Markenwerte
  • Kontakt
  • Karriere
  • Veranstaltungen
  • Podcast
  • Blog
  • Kunden
  • Rechtliches • Datenschutz
  • Sicherheit
الْعَرَبيّة 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 ist eine Suite von Open-Source-Betriebsanwendungen, die alle Bedürfnisse Ihres Unternehmens abdecken: CRM, E-Commerce, Buchhaltung, Lager, Kassensystem, Projektmanagement etc.

Das einzigartige Wertversprechen von Odoo ist, dass es gleichzeitig sehr einfach zu bedienen und voll integriert ist.

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