How to adjust column widths in tree views in Odoo 10?

Question

I wanted to change the column width of the columns in tree view. So far I have tried these solutions

1. Adding in the field tag: width="100px" or width="15%%"

2. Adding in the field tag: style="width: 100px"

But Nothing seems to work for me.

Answer 1

I also looking for the same question, but seems like "style" doesn't work on tree view in Odoo. Seems like the only way is to define your own css class put the fixed width then assign the class on your field in your tree view.

Check this out:

xml

<tree string="Tree String" class="my_class">
    <field name="my_field" />
</tree>

css

.my_class [data-id="my_field"] {
    width: 1000px;
}

Answer 2

Method _freezeColumnWidths() in ListRenderer computes and set the column widths in the tree view. So we can inherit that method to adjust width for specific model and field(s).

The following code works on Odoo v14 (may be both of v13 and v15), adjust column width of the field partner_id of model purchase.order in tree view.

addons/ffm2_purchase/static/src/js/fix_width_list_view.js

odoo.define('ffm2_purchase.fix_width_list_view', function (require) {
    "use strict";
    
    require("web.EditableListRenderer");
    var ListRenderer = require('web.ListRenderer');
    ListRenderer.include({
        _freezeColumnWidths: function () {
            var res = this._super();
            if (this.state.model=="purchase.order") {
                this.$el.find('th[data-name="partner_id"]').css({
                    "max-width": "100px",
                    "width": "100px"
                });
            }
            return res;
        }
    });
});

addons/ffm2_purchase/views/templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/ffm2_purchase/static/src/js/fix_width_list_view.js"></script>
        </xpath>
    </template>    
</odoo>

Answer 3

odoo.define('hr_pms.custom_fields', function (require) {
    "use strict"; 
    require("web.EditableListRenderer");
    var ListRenderer = require('web.ListRenderer');
    ListRenderer.include({
        _freezeColumnWidths: function () {
            var res = this._super();
            if (this.state.model=="kra.section.line") {
                console.log('Exactly .......')
                this.$el.find('th[data-name="name"]').css({
                    "max-width": "450px",
                    "width": "450px",
                });
                this.$el.find('th[data-name="appraisee_weightage"]').css({
                    "max-width": "150px",
                    "width": "150px",
                });
            }
            return res;
        }
    });
});