This question has been flagged
2 Replies
5778 Views

For example in sale order , the price field, quantity fields etc ... are right aligned . How can i  change it to left?.

Avatar
Discard
Best Answer

It worked with me in odoo 10:

just create CSS File :styletree.css :

.o_list_number {

    text-align: left !important;

    white-space: nowrap;

}

<template id="custom_assets_backend" name="custom bar assets" inherit_id="web.assets_backend">

  <xpath expr="." position="inside">

   <link rel="stylesheet" href="/your_model/static/src/less/styletree.css"/>

    </xpath>

 </template>

Avatar
Discard
Best Answer

For anyone who is still struggling with this on Odoo16. This is my answer for another post... but it solves the same problem:

Brief Explanation:
1- Inspect the desired field using the developer tool of your browser.
2- Identify the class that is changing the alignment (or any other style) of your field.
3- Reference that class in your css file or xml style tag.
4- Add your desired style for that class.
5- Celebrate.

Detailed Explanation:
1 - Right click on the header of the element that you want to change its alignment (or any other default style). 
1.1- Click inspect.

alternative way: (You don't have to follow these steps if you understand the first step)
1.1- Click the three dots on the right upper corner of your browser (I'm using Chrome)
1.2- Select "More Tools" --> "Developer Tools"
1.3- Enable the inspect from the right upper corner of the panel (or use CTRL+SHIFT+C)
1.4- Left Click on the element that you want to change the alignment of.

2.1- Now locate the styles tab (It should be on the right upper corner... I think :))

2.2- You should see all the classes and their styles for the element that you clicked on. Look for the class that has the style you wish to change (for my case any class that adds a "text-align: right") because I want to align my element to the left.

2.2.1 - I found this class:
.text-end {

text-align: right !important;



3.1- Now you can reference the same class in an external CSS file or in your XML using the style tag (I did the XML one, because I am lazy)

3.2- XML code:










Hope you guys find my explanation helpful! 

This method works with the headers and the fields themselves.
- If you want to change the header then inspect the header and look for the desired class/classes.
- If you want to change the field then inspect the field itself and look for the desired class/classes.

Avatar
Discard

This is the xml code: (It's bugged on the main answer for some reason)
<style>
.text-end {
text-align: left !important;
}
</style>
<field name="current_category_ids" invisible="1"/>
<field name="unique_category_ids" widget="one2many_list">
<tree class="custom-class" editable="bottom">
<field name="category"/>
<field name="commission_weight"/>
</tree>
</field>