Skip ke Konten
Odoo Menu
  • Login
  • Uji coba gratis
  • Aplikasi
    Keuangan
    • Akuntansi
    • Faktur
    • Pengeluaran
    • Spreadsheet (BI)
    • Dokumen
    • Tanda Tangan
    Sales
    • CRM
    • Sales
    • POS Toko
    • POS Restoran
    • Langganan
    • Rental
    Website
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Rantai Pasokan
    • Inventaris
    • Manufaktur
    • PLM
    • Purchase
    • Maintenance
    • Kualitas
    Sumber Daya Manusia
    • Karyawan
    • Rekrutmen
    • Cuti
    • Appraisal
    • Referensi
    • Armada
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Acara
    • Otomatisasi Marketing
    • Survei
    Layanan
    • Project
    • Timesheet
    • Layanan Lapangan
    • Meja Bantuan
    • Planning
    • Appointment
    Produktivitas
    • Discuss
    • Approval
    • IoT
    • VoIP
    • Pengetahuan
    • WhatsApp
    Aplikasi pihak ketiga Odoo Studio Platform Odoo Cloud
  • Industri-Industri
    Retail
    • Toko Buku
    • Toko Baju
    • Toko Furnitur
    • Toko Kelontong
    • Toko Hardware
    • Toko Mainan
    Makanan & Hospitality
    • Bar dan Pub
    • Restoran
    • Fast Food
    • Rumah Tamu
    • Distributor Minuman
    • Hotel
    Real Estate
    • Agensi Real Estate
    • Firma Arsitektur
    • Konstruksi
    • Estate Management
    • Perkebunan
    • Asosiasi Pemilik Properti
    Konsultansi
    • Firma Akuntansi
    • Mitra Odoo
    • Agensi Marketing
    • Firma huku
    • Talent Acquisition
    • Audit & Sertifikasi
    Manufaktur
    • Tekstil
    • Logam
    • Perabotan
    • Makanan
    • Brewery
    • Corporate Gift
    Kesehatan & Fitness
    • Sports Club
    • Toko Kacamata
    • Fitness Center
    • Wellness Practitioners
    • Farmasi
    • Salon Rambut
    Perdagangan
    • Handyman
    • IT Hardware & Support
    • Sistem-Sistem Energi Surya
    • Pembuat Sepatu
    • Cleaning Service
    • Layanan HVAC
    Lainnya
    • Organisasi Nirlaba
    • Agen Lingkungan
    • Rental Billboard
    • Fotografi
    • Penyewaan Sepeda
    • Reseller Software
    Browse semua Industri
  • Komunitas
    Belajar
    • Tutorial-tutorial
    • Dokumentasi
    • Sertifikasi
    • Pelatihan
    • Blog
    • Podcast
    Empower Education
    • Program Edukasi
    • Game Bisnis 'Scale Up!'
    • Kunjungi Odoo
    Dapatkan Softwarenya
    • Download
    • Bandingkan Edisi
    • Daftar Rilis
    Kolaborasi
    • Github
    • Forum
    • Acara
    • Terjemahan
    • Menjadi Partner
    • Layanan untuk Partner
    • Daftarkan perusahaan Akuntansi Anda.
    Dapatkan Layanan
    • Temukan Mitra
    • Temukan Akuntan
    • Temui penasihat
    • Layanan Implementasi
    • Referensi Pelanggan
    • Bantuan
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Dapatkan demo
  • Harga
  • Bantuan

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

  • CRM
  • e-Commerce
  • Akuntansi
  • Inventaris
  • PoS
  • Project
  • MRP
All apps
Anda harus terdaftar untuk dapat berinteraksi di komunitas.
Semua Post Orang Lencana-Lencana
Label (Lihat semua)
odoo accounting v14 pos v15
Mengenai forum ini
Anda harus terdaftar untuk dapat berinteraksi di komunitas.
Semua Post Orang Lencana-Lencana
Label (Lihat semua)
odoo accounting v14 pos v15
Mengenai forum ini
Help

Custom qweb report with css not working

Langganan

Dapatkan notifikasi saat terdapat aktivitas pada post ini

Pertanyaan ini telah diberikan tanda
pdfqwebreportv9odooV9
2 Replies
25542 Tampilan
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
Buang
Avatar
Travis Waelbroeck
Jawaban Terbai

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
Buang
Emanuel Cino
Penulis

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

Emanuel Cino
Penulis

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
Jawaban Terbai

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
Buang
Emanuel Cino
Penulis

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
Penulis

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
Penulis

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

Menikmati diskusi? Jangan hanya membaca, ikuti!

Buat akun sekarang untuk menikmati fitur eksklufi dan agar terlibat dengan komunitas kami!

Daftar
Post Terkait Replies Tampilan Aktivitas
Conditional column on table
pdf qweb report
Avatar
0
Mei 24
2794
Change font in QWeb template
pdf qweb report
Avatar
Avatar
Avatar
2
Mei 24
5123
Sale Order PDF Report Diselesaikan
pdf qweb report
Avatar
Avatar
Avatar
Avatar
3
Feb 24
4416
[ODOO 15] PDF in Qweb Report
pdf qweb report
Avatar
Avatar
Avatar
2
Nov 22
7035
Invoice on basic layout
pdf invoice qweb report
Avatar
0
Apr 24
2754
Komunitas
  • Tutorial-tutorial
  • Dokumentasi
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Terjemahan
Layanan
  • Odoo.sh Hosting
  • Bantuan
  • Peningkatan
  • Custom Development
  • Pendidikan
  • Temukan Akuntan
  • Temukan Mitra
  • Menjadi Partner
Tentang Kami
  • Perusahaan kami
  • Aset Merek
  • Hubungi kami
  • Tugas
  • Acara
  • Podcast
  • Blog
  • Pelanggan
  • Hukum • Privasi
  • Keamanan
الْعَرَبيّة 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 adalah rangkaian aplikasi bisnis open source yang mencakup semua kebutuhan perusahaan Anda: CRM, eCommerce, akuntansi, inventaris, point of sale, manajemen project, dan seterusnya.

Mudah digunakan dan terintegrasi penuh pada saat yang sama adalah value proposition unik Odoo.

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