CODEWITHSUNDEEP
cssbootstrap-4odooqwebodoo-13
Simon Capriles
Simon Capriles

Reputation: 183

Align to the middle vertically and horizontally in Odoo's Qweb Reports

I'm trying to align vertically and horizontally to the center the content of the columns of the next example code:

<div class="row">
   <div class="col-4 text-center">
      <img t-if="o.company_id.logo" t-att-src="image_data_uri(o.company_id.logo)" style="max-height: 60px;" alt="Logo"/>
      <div>A String</div>
   </div>
   <div class="col-4" text-center>
      <div>Another String</div>
   </div>
   <div class="col-4">
      <div class="panel-body" style="border: 1px solid black">
          <div>Panel title <t t-esc="o.company_id.field_1"/></div>
          <div>Factura N°: <t t-esc="o.field_2"/></div>
          <div>ORIGINAL</div>
       </div>
   </div>
</div>

Until now I've tried these classes: "row align-items-center", "col align-self-center", "align-middle" and the style "text-align:center;" none of these have worked. The class "text-center" does align horizontally but how can I achieve aligning in both vertically and horizontally? is it possible?

Upvotes: 0

Views: 4475

Answers (2)

phoenix
phoenix

Reputation: 1

I used this style in parent div to put image vertically in the center for odoo 16:

style=" display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical;display: flex; justify-content: center;flex-direction: column; ">

Upvotes: 0

Cayprol
Cayprol

Reputation: 21

The issue of vertical alignment is caused by wkhtmltopdf.
On Odoo 15 with wkhtmltopdf 0.12.5 (with patched qt)
Add style attributes to parent div will center the child content of p or span tags.

<div class="text-center" t-attf-style="display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical;">
    <span t-field="o.text_field_to_be_centered"/>
</div>

The standard way of vertical alignment is using flex, but display: flex; is not recognized by wkhtmltopdf.
We need all 3 -webkit-box attributes to center vertically.
Last, class="text-center" is properly recognized for horizontally center alignment.

Upvotes: 1

Related Questions