I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions:
Trying to change the width attribute in the field tag: width="100px" or width="15%%"
Using the style attribute in the field tag: style="width: 100px"
Unfortunately, none of these methods seem to be working for me.
I have been searching for a solution to the same question, and it appears that using the "style" attribute does not impact the tree view in Odoo. It seems that the only workaround is to create your own css class with a fixed width and then apply that class to your field within the tree view.
For more information, you can check out this link:
Here is an example of how you can define your css class within the xml:
<tree string="Tree String" class="my_class">
<field name="my_field" />
</tree>
And here is an example of the css styling for your custom class:
.my_class [data-id="my_field"] {
width: 1000px;
}
The method _freezeColumnWidths() found in the ListRenderer is responsible for calculating and applying column widths within the tree view. It is possible to inherit this method to customize the width of specific fields for a particular model.
The provided code snippet demonstrates how to adjust the column width of the partner_id field in the purchase.order model for Odoo version 14, with potential compatibility for versions 13 and 15 as well.
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>
odoo.define('employee_performance.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=="performance_review.section.line") {
console.log('Exactly .......')
this.$el.find('th[data-name="name"]').css({
"max-width": "450px",
"width": "450px",
});
this.$el.find('th[data-name="reviewer_weightage"]').css({
"max-width": "150px",
"width": "150px",
});
}
return res;
}
});
});I recently added horizontal scrolling to my website wikiprop.org, following a tutorial from another website. However, I noticed that my scroll does not have the same inertia/momentum effect where it continues scrolling after a swipe and gradually slows dow ...
Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...
Currently, I'm engaged in a project where my task involves duplicating an entire website using HTTrack. However, I only need to copy the main page and web pages that are one link deep. Upon copying the website, my next challenge is to translate all of ...
I have created custom styles for an object as shown below: form#sign_in{ position:relative; margin:85px auto 50px auto; width:455px; background:#fff; border:#dfdfdf 1px solid; border-radius:5px; -moz-border-radius:5px; -web ...
When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...
Code: Demo: In the majority of modern browsers such as Safari, Chrome, Firefox, and IE8/9, the code works perfectly fine. However, there seems to be an issue with IE7, causing it not to work. Any idea why this might be happening? My goal is for the conte ...
As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: However, with my current code, the result I'm seeing is different from what I expected: This snippet showcases the code I am working with: ...
I'm having trouble locating the issue in my code, and the text reveal feature isn't working. Interestingly, a simple animation works fine, indicating that there's no problem with the import or library: import { motion } from ...
Looking to achieve these effects for <option> and <button> using CSS and JavaScript. Any suggestions on how to do this? ...
I have an SVG file containing two different paths. <path d="M 84.4 53.2 C 75.3 50.1 67.1 48.5 59.6 48.3 C 51.2 48 45.2 47.5 41.5 46.5 C 35.7 45.1 29.9 42.4 23.9 38.4 C 21.6 36.9 19.4 35.2 17.3 33.2 C 19.4 34.2 21.6 35 23.9 35.6 C 27.3 36.5 34.1 37 44 ...
Is there a way to prevent an input box from displaying on a lower line than the menu when using CSS to create a one line menu floated to the right? This is the CSS code being used: <style type="text/css"> #nav { margin:0; padding:0; lis ...
In my current situation, the design calls for the use of two different images as background images - one for desktop and another for mobile. These images are uploaded through a CMS, allowing me to retrieve the URLs for both using PHP. Is there a way to pa ...
Is it possible to change the color of div #panel when hovering over the button #button inside div #left? #left #button:hover~#panel { background-color: blue; } #panel { position: absolute; float: r ...
While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...
I'm working on containing my ul and li elements within a div while respecting the div's width using margin-left: auto. My goal is to prevent the ul/li from extending outside of the div, keeping them neatly inside the container. Based on my resear ...
Struggling with a graph display issue here. It's quite perplexing as it works fine on older laptops and Safari, but not on Chrome or older versions of Firefox. Works like a charm on my old laptop and Safari, but fails on Chrome and Firefox (haven&apo ...
So, I've been working with Bootstrap to structure columns and rows. It seems like I have the container, rows, and columns set up correctly for each post. However, I am puzzled as to why a new row is created for every post I make, causing them to stack ...
I am attempting to assess an expression that is originating from one component and being passed into another component. Here is the code snippet: Parent.component.ts parentData: any= { name: 'xyz', url: '/test?testid={{element["Te ...
The issue I am experiencing with my blog is that the dropdown menu is appearing behind the image slider on the main page. You can see it here: Can anyone offer guidance on how to prevent this from happening so that the dropdown menu is not obscured? Just ...
Currently, I am utilizing the slick slider from and I want to overlay text on top of the image. I tried using bootstrap carousel-caption, which works well with any image. However, with slick slider, it seems like the text is not at the highest level as I ...