Collapsible HTML Field

Odoo's standard html field renders the full content regardless of length, pushing everything else off-screen on records with verbose rich-text descriptions. Collapsible HTML Field wraps the standard widget with collapse-and-expand behaviour using a pure OWL 2 component. It also fixes the sandboxed preview bug where Word-pasted HTML (containing a <head> tag) forces the field into an uneditable readonly preview even in edit/draft mode.

See It in Action

▼ Collapsed state — content clipped to 120 px with a bottom fade. “Show more” button appears only when content overflows.

▲ Expanded state — one click reveals the full content. “Show less” collapses it back.

✎ Edit mode — Wysiwyg toolbar loads normally. No height restriction is ever applied in edit state.

Drop-in on Any Model

Works on any fields.Html field in any model. No Python changes — just swap the widget attribute in the form view XML.

✓ What is Covered

• Any fields.Html field on any Odoo model
• Readonly mode: collapse + Show more / Show less toggle
• Edit mode: full Wysiwyg editor, no height limit
• Word-pasted HTML with complex <head> tags
• Record navigation: auto-reset to collapsed
• Odoo 18.0 Community & Enterprise

⊗ What is NOT Affected

• Short fields that don’t overflow 120 px (no toggle shown)
• List / Kanban / other non-form views
• Website / portal views
• Odoo 17.0 and below (different html_editor API)
• Non-Html field types (Char, Text, etc.)

Developer Guide

1. Basic Usage

Replace widget="html" with widget="collapsible_html" on any html field in a form view:

<!-- Before -->
<field name="description" widget="html"/>

<!-- After -->
<field name="description" widget="collapsible_html"/>

2. Add as a Dependency

In your module’s __manifest__.py, declare the dependency so the widget JS is loaded before your views:

{
    'name': 'My Module',
    'depends': [
        'web',
        'web_collapsible_html_field',  # <-- add this
    ],
}

3. Override a Core View with Inheritance

Use position="attributes" to change only the widget attribute without touching any other part of the view:

<record id="project_task_form_collapsible_desc" model="ir.ui.view">
    <field name="name">project.task.form.collapsible.desc</field>
    <field name="model">project.task</field>
    <field name="inherit_id" ref="project.view_task_form2"/>
    <field name="arch" type="xml">
        <xpath expr="//field[@name='description']"
               position="attributes">
            <attribute name="widget">collapsible_html</attribute>
        </xpath>
    </field>
</record>

4. Customise Collapse Height via CSS

The default height is 120 px. Override it with a SCSS/CSS rule in your own module:

/* Collapse to 200 px instead */
.bs-collapsible-html-wrapper.bs-collapsed {
    max-height: 200px;
}

Installation

1. Download the module from the Odoo App Store.
2. Place the web_collapsible_html_field folder in your Odoo addons directory.
3. Restart the Odoo server.
4. Go to Settings → Apps, search for Collapsible HTML Field, and click Install.
5. Add widget="collapsible_html" to any html field in your form views.

Technical Details