| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 66 |
| Technical Name |
web_collapsible_html_field |
| License | LGPL-3 |
| Website | https://erp-23.com |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Lines of code | 66 |
| Technical Name |
web_collapsible_html_field |
| License | LGPL-3 |
| Website | https://erp-23.com |
Collapsible HTML Field
Automatically collapse long rich-text descriptions in Odoo 18 backend forms. A smooth Show more / Show less toggle appears only when content overflows — and the Wysiwyg editor stays fully functional in edit mode.
widget="collapsible_html".
Overview
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.
Key Features
Smart Overflow Detection
On every render the component measures true scrollHeight and shows the toggle only when content exceeds 120 px.
Wysiwyg Always Works
Height restriction is applied only in readonly mode. The rich-text editor is never wrapped or constrained in edit state.
sandboxedPreview Override
Word-pasted HTML (with <head> tags) no longer forces the field into an uneditable sandboxed preview during edit mode.
Auto-Reset on Navigation
When the user navigates to a different record, the field resets to collapsed automatically. No stale “Show less” state left behind.
Theme-Safe Fade
Uses CSS mask-image for the bottom fade — works correctly on dark and coloured themes without a white overlay.
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.Htmlfield 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;
}
COLLAPSED_HEIGHT_PX constant at the top of collapsible_html_field.js.
Installation
- Download the module from the Odoo App Store.
- Place the
web_collapsible_html_fieldfolder in your Odoo addons directory. - Restart the Odoo server.
- Go to Settings → Apps, search for Collapsible HTML Field, and click Install.
- Add
widget="collapsible_html"to anyhtmlfield in your form views.
Technical Details
HtmlField from @html_editor — no Python, no XML models
html_editor.HtmlField
scrollHeight
Support & Contact
We’re here to help — reach out via any channel below.
© 2025 ERP23 — a product of BrainStation-23. Released under LGPL-3. Compatible with Odoo 18.0.
Please log in to comment on this module