1 min read
Odoo Development: Tree view with custom styles
The Odoo UI cannot be customized as easy as reports and websites. Using modules we can easily inject custom CSS styles.
Here is an example where we set the width of an unlink button in a custom tree view.
views/bom.xml
<field name="part_ids" context="{'default_certificate_planer_bom_id': id}">
<tree limit="200" class="button_width" delete="0">
<field name="sequence" widget="handle"/>
<field name="certificate_planer_part_id"/>
<field name="designation"/>
<button name="unlink" class="oe_edit_only oe_link" icon="fa-times" type="object" string="Remove"/>
</tree>
</field>
The button has the name unlink
and its parent tree elemnt has the CSS class button_width
. The name and class are used as selectors in our custom CSS:
static/src/css/style.css
.button_width [data-name="unlink"] {
width: 32px;
}
Make sure that the style.css
file is added to the module manifest using the web.assets_backend
as reference.
Tags: odoo , development , tutorial
Improve this page
Show statistic for this page