Overslaan naar inhoud
Odoo Menu
  • Aanmelden
  • Probeer het gratis
  • Apps
    Financiën
    • Boekhouding
    • Facturatie
    • Onkosten
    • Spreadsheet (BI)
    • Documenten
    • Ondertekenen
    Verkoop
    • CRM
    • Verkoop
    • Kassasysteem winkel
    • Kassasysteem Restaurant
    • Abonnementen
    • Verhuur
    Websites
    • Websitebouwer
    • E-commerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Bevoorradingsketen
    • Voorraad
    • Productie
    • PLM
    • Inkoop
    • Onderhoud
    • Kwaliteit
    Personeelsbeheer
    • Werknemers
    • Werving & Selectie
    • Verlof
    • Evaluaties
    • Aanbevelingen
    • Wagenpark
    Marketing
    • Social media Marketing
    • E-mailmarketing
    • SMS Marketing
    • Evenementen
    • Marketingautomatisering
    • Enquêtes
    Diensten
    • Project
    • Urenstaten
    • Buitendienst
    • Helpdesk
    • Planning
    • Afspraken
    Productiviteit
    • Chat
    • Goedkeuringen
    • IoT
    • VoIP
    • Kennis
    • WhatsApp
    Apps van derden Odoo Studio Odoo Cloud Platform
  • Bedrijfstakken
    Detailhandel
    • Boekhandel
    • kledingwinkel
    • Meubelzaak
    • Supermarkt
    • Bouwmarkt
    • Speelgoedwinkel
    Food & Hospitality
    • Bar en Pub
    • Restaurant
    • Fastfood
    • Gastenverblijf
    • Drankenhandelaar
    • Hotel
    Vastgoed
    • Makelaarskantoor
    • Architectenbureau
    • Bouw
    • Vastgoedbeheer
    • Tuinieren
    • Vereniging van eigenaren
    Consulting
    • Accountantskantoor
    • Odoo Partner
    • Marketingbureau
    • Advocatenkantoor
    • Talentenwerving
    • Audit & Certificering
    Productie
    • Textiel
    • Metaal
    • Meubels
    • Eten
    • Brewery
    • Relatiegeschenken
    Gezondheid & Fitness
    • Sportclub
    • Opticien
    • Fitnesscentrum
    • Wellness-medewerkers
    • Apotheek
    • Kapper
    Trades
    • Klusjesman
    • IT-hardware & support
    • Zonne-energiesystemen
    • Schoenmaker
    • Schoonmaakdiensten
    • HVAC-diensten
    Andere
    • Non-profitorganisatie
    • Milieuagentschap
    • Verhuur van Billboards
    • Fotograaf
    • Fietsleasing
    • Softwareverkoper
    Browse all Industries
  • Community
    Leren
    • Tutorials
    • Documentatie
    • Certificeringen
    • Training
    • Blog
    • Podcast
    Versterk het onderwijs
    • Onderwijs- programma
    • Scale Up! Business Game
    • Bezoek Odoo
    Download de Software
    • Downloaden
    • Vergelijk edities
    • Releases
    Werk samen
    • Github
    • Forum
    • Evenementen
    • Vertalingen
    • Word een Partner
    • Services for Partners
    • Registreer je accountantskantoor
    Diensten
    • Vind een partner
    • Vind een boekhouder
    • Een adviseur ontmoeten
    • Implementatiediensten
    • Klantreferenties
    • Ondersteuning
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Vraag een demo aan
  • Prijzen
  • Help

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

  • CRM
  • e-Commerce
  • Boekhouding
  • Voorraad
  • PoS
  • Project
  • MRP
All apps
Je moet geregistreerd zijn om te kunnen communiceren met de community.
Alle posts Personen Badges
Labels (Bekijk alle)
odoo accounting v14 pos v15
Over dit forum
Je moet geregistreerd zijn om te kunnen communiceren met de community.
Alle posts Personen Badges
Labels (Bekijk alle)
odoo accounting v14 pos v15
Over dit forum
Help

Custom qweb report with css not working

Inschrijven

Ontvang een bericht wanneer er activiteit is op deze post

Deze vraag is gerapporteerd
pdfqwebreportv9odooV9
2 Antwoorden
25470 Weergaven
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
Annuleer
Avatar
Travis Waelbroeck
Beste antwoord

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
Annuleer
Emanuel Cino
Auteur

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

Emanuel Cino
Auteur

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 antwoord

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
Annuleer
Emanuel Cino
Auteur

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
Auteur

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
Auteur

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

Geniet je van het gesprek? Blijf niet alleen lezen, doe ook mee!

Maak vandaag nog een account aan om te profiteren van exclusieve functies en deel uit te maken van onze geweldige community!

Aanmelden
Gerelateerde posts Antwoorden Weergaven Activiteit
Conditional column on table
pdf qweb report
Avatar
0
mei 24
2761
Change font in QWeb template
pdf qweb report
Avatar
Avatar
Avatar
2
mei 24
5019
Sale Order PDF Report Opgelost
pdf qweb report
Avatar
Avatar
Avatar
Avatar
3
feb. 24
4353
[ODOO 15] PDF in Qweb Report
pdf qweb report
Avatar
Avatar
Avatar
2
nov. 22
6991
Invoice on basic layout
pdf invoice qweb report
Avatar
0
apr. 24
2717
Community
  • Tutorials
  • Documentatie
  • Forum
Open Source
  • Downloaden
  • Github
  • Runbot
  • Vertalingen
Diensten
  • Odoo.sh Hosting
  • Ondersteuning
  • Upgrade
  • Gepersonaliseerde ontwikkelingen
  • Onderwijs
  • Vind een boekhouder
  • Vind een partner
  • Word een Partner
Over ons
  • Ons bedrijf
  • Merkelementen
  • Neem contact met ons op
  • Vacatures
  • Evenementen
  • Podcast
  • Blog
  • Klanten
  • Juridisch • Privacy
  • Beveiliging
الْعَرَبيّة 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 is een suite van open source zakelijke apps die aan al je bedrijfsbehoeften voldoet: CRM, E-commerce, boekhouding, inventaris, kassasysteem, projectbeheer, enz.

Odoo's unieke waardepropositie is om tegelijkertijd zeer gebruiksvriendelijk en volledig geïntegreerd te zijn.

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