Skip to Content
Menu
This question has been flagged

usually collum heading in tree view for numeric_field is alligned right, But I want to change it to left/center. 

Avatar
Discard
Best Answer

I wasted so much time on problems like this but finally... Today I can say that I've found the solution for any similar problem related to default styles being stubborn.
 
I will show you step-by-step guide on  how I solved it (Because the classes used may differ overtime, but the solution method will hopefully stay the same).

How I Solved It:

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! 

Edit: 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>

Best Answer

@dmashraf.
For this you need to create css file when you defin how you want to allign the text something like:

.o_list_view .o_list_table thead > tr > th:not(.o_list_record_selector).o_list_number_th {
    text-align: center;
}
.o_list_view .o_list_table tbody > tr > td:not(.o_list_record_selector).o_list_number {
    text-align: center;
}  

You can find the code of the list view css in this file:
addons\web\static\src\views\list\list_renderer.scss

This link may help you:
https://learnopenerp.blogspot.com/2016/04/how-to-align-left-odoo-fields-float.html

Avatar
Discard
Related Posts Replies Views Activity
1
Jan 24
1573
1
Apr 24
1212
0
Dec 23
1210
2
Aug 23
3382
3
Jun 23
1849