Skip to Content
Dette spørgsmål er blevet anmeldt
2 Besvarelser
5756 Visninger
Avatar
Kalmen Chia

Hi,


When i specified in my  Tree/List view, as follow,

 

when i check in my browser, the width will not affected instead is

fixed width 92px, but it showed at min-width as shown in the picture, 


Can I get help on how I can properly set it if I wish to get my column to have its own width? 

Thanks.




Avatar
Kassér
Avatar
Kalmen Chia
Forfatter Bedste svar

Hi, 

Thanks but advise is not working,

i have added as per advise and can see the class is in as above and you can see that the 1st column which is employee_id column but we cannot get the column to display with a bigger column size as it always sticked to the 92px, and the CSS is as follows,

 


But unfortunately, it can't work!

Anything i missed or any other ways / ideas ?

Thanks.

Avatar
Kassér
Avatar
Idris Eslam Idris
Bedste svar

Hi Kalmen Chia

Modify your field definition by adding a class attribute with a custom class name. you can do it like this 
this in your xml and for the css 
.custom-employee-width {

    min-width: 200px;

    width: 92px;

}

and don't forgot about to put it in assets_backend ===> "/your_module/static/src/css/custom_styles.scss"


Avatar
Kassér
Kalmen Chia
Forfatter

I am pretty sure, after checking, that Odoo v17.0 , the tree view, when we set the width at <field name"employee_id" width="200px"/> will not work! And Odoo is either having bugs or something when it tried to render.

The suggestion will not work even if we put the class <field name"employee_id" class="custom-employee-width"/>; it will not set the class at <th> but at <td>. So the only way to do it for now, until Odoo provide a way to set the width of the column in the tree view, temporary solution will need to try to load JS code for the view and then after tree view finish rendered, we need to execute some sort of manual JS code, so that it can add the class "custom-employee-width" into the desire <th> node instead of <td> node.

I am still checking to see what is the best way to do it and how we can do it in the OWL way!

Does anyone have some good ideas, appreciate it if you could share it, thanks.

Kalmen Chia
Forfatter

yes, confirmed, and i managed to do as per what i said, but share here so that hope to help someone ,

class HrTableListController extends ListController {
setup(){
super.setup();
console.log("This is Hr table controller");
// Check if the current view is the target list view

onMounted(() => {
//alert("This is hr_roster controller");
var targetTh = document.querySelector('th[data-name="employee_id"]');
// Add the class "custom-class" if the element is found
if (targetTh) {
targetTh.classList.add("custom-employee-id-width");
}
});
}

}

and I used the latest v17.0, and this answer is applicable to the current v17.0 only. which it uses the "js_class" at the tree view XML.
If you need to find out what is js_class, need to refer to the v17.0 documentation.

in a nutshell,
1. need to create a js at the src folder of your module,
2. define the v17.0 , owl format in the js as per the code above,
export it.
3. define at manifest to load it at asset, web.assets_backend
4. define the CSS and load it at asset "web.assets_backend" also.
5. in the js file, remember to register at the "views" registry as follow,
registry.category("views").add("hr_table_list_view", hrRosterListView);
the hr_table_list_view is referring to the view template of the list view arch, which is something like this,
<tree string="HR Table" editable="bottom" js_class="hr_table_list_view">

Hope it helps!