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;
}
});
});https://i.stack.imgur.com/WKOXT.png Currently, I have 4 lines and the 5th line in the current input field. This is my React code snippet: import { FC, useEffect, useState } from "react"; interface BlogWitterProps {} const BlogWitter: FC<B ...
I am attempting to create a simple effect: The div contains an image and text with a background of RGBA(255,255,255,0.5). Upon hovering over the element, I want the image to decrease opacity and the background behind the text to disappear in a seamless t ...
In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...
Displayed below is the image with a width of 192 and height of 109: <a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAA ...
Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...
Is there a way to adjust my website's scale based on the device width, such as changing it to 0.7 for certain devices? The only information I've found so far is using the <meta> tag: <meta name="viewport" content="width=device-width, i ...
My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...
I attempted this solution, but unfortunately it did not produce the desired outcome: .stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c "; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aw ...
I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...
After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...
Issue One: When moving one square, the border should appear and the menu should cover the entire height. I've already spent 2 hours trying to fix this, but it still doesn't fill the whole height or center vertically. Problem Two: If you make the ...
After creating this website with a viewport setup, I noticed that it is not fully visible on certain screens. When viewed on a CRT monitor at 800x600 desktop resolution or lower than 1280x800, such as on mobile devices, the content gets clipped. Is there a ...
I am utilizing the Bootstrap Dual Listbox plugin to assist users in selecting specific options. I have successfully integrated this plugin into my project. However, I encountered an issue when attempting to impose a limit on the number of options a user ...
I use CSS to set a custom cursor image: #scroll_up{ display: block; position: absolute; width: 960px; height: 300px; cursor: url(../imgs/cursor_up.png), auto; } The above style is assigned to a div element so that the cursor appea ...
What is the best way to make an image fill an entire div using Html and CSS? ...
What is the recommended method for adding borders between children of various elements within a div? In the example below, there should be borders between p,div and div,img. <div id="list"> <p>child 1</p> <div>child 2</ ...
Desired Outcome Actual Result The goal is to toggle the red-background class, so that when hovering over the button-bullet, its background-color changes to #FCC1C5. Avoiding the use of .btn.button-bullet:hover</code due to jQuery logic disabling a ...
I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...
I've encountered an issue in Chrome where the width adjusts to fit its content instead of taking up the full width of the container. However, this problem does not occur on Firefox. https://i.stack.imgur.com/HyWGU.png When I click on the expand icon ...
Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...