Skip to Content

Modal Style

by , ,
Odoo

$ 23.04

v 17.0 Third Party
Availability
Odoo Online
Odoo.sh
On Premise
Lines of code 194
Technical Name ylhc_modal_style
LicenseOPL-1
Websitehttps://www.ylhctec.com
Versions 17.0 18.0
You bought this module and need support? Click here!
Availability
Odoo Online
Odoo.sh
On Premise
Lines of code 194
Technical Name ylhc_modal_style
LicenseOPL-1
Websitehttps://www.ylhctec.com
Versions 17.0 18.0

Modal Style Customization

Easily customize Odoo modal width, position, and style

A powerful module that gives you complete control over all modal dialog styles in Odoo. With simple context configuration, you can customize modal width, position, and other CSS styles without writing any frontend code!

Preview

See how to customize modal width and style in action

Modal Style Demo

Key Features

Custom Width

Flexibly control modal width with pixels, percentages, or any CSS unit

CSS Style Support

Support any CSS style properties with complete modal appearance control

Plug & Play

No code modification needed, simply use context configuration

Multiple Dialog Support

Support all dialog types: forms, selects, actions, relational fields, etc.

Extra Classes

Add custom CSS classes for more complex styling customization

Seamless Integration

Perfect compatibility with Odoo 18.0, based on OWL 2.0 framework

Usage Guide

This module provides a simple yet powerful way to customize modal styles. Just add configuration in your action or context.

Basic Configuration

Set modal CSS styles using the modal_style parameter:

{
    'type': 'ir.actions.act_window',
    'res_model': 'your.model',
    'view_mode': 'form',
    'target': 'new',
    'context': {
        'modal_style': 'max-width: 1800px !important;'
    }
}
Width Configuration Examples
Configuration Effect Use Case
'modal_style': 'max-width: 90%' Modal max-width is 90% of screen width Large screen display with margins
'modal_style': 'max-width: 1800px' Modal max-width is 1800 pixels Fixed width for complex forms
'modal_style': 'min-width: 600px; max-width: 80%' Minimum 600px, maximum 80% of screen Responsive design for various screens
'modal_style': 'width: 100vw; max-width: 100%' Full screen width Maximum display space needed
Python Code Examples
1. Form View Dialog
def open_custom_form(self):
    return {
        'type': 'ir.actions.act_window',
        'name': 'Custom Form',
        'res_model': 'res.partner',
        'view_mode': 'form',
        'target': 'new',
        'context': {
            'modal_style': 'max-width: 90%; min-height: 600px;',
            'default_name': 'New Partner'
        }
    }
2. Select Dialog
def select_records(self):
    return {
        'type': 'ir.actions.act_window',
        'name': 'Select Records',
        'res_model': 'product.product',
        'view_mode': 'list,form',
        'target': 'new',
        'context': {
            'modal_style': 'max-width: 1600px !important;',
            'search_default_active': 1
        }
    }
3. Relational Field Configuration (Many2one/Many2many)
<field name="partner_ids" 
    widget="many2many_tags"
    context="{'modal_style': 'max-width: 85%'}" />

<field name="product_id" 
    options="{'no_create': True}"
    context="{'modal_style': 'max-width: 1200px; height: 80vh;'}" />
4. XML View Configuration
<button name="custom_action" 
    type="object" 
    string="Open Modal"
    context="{'modal_style': 'max-width: 90%'}" />
Advanced Usage
Combine Multiple Style Properties
'context': {
    'modal_style': 'max-width: 90%; min-height: 500px; margin-top: 50px;'
}
Add Custom Classes with extra_classes
'context': {
    'modal_style': 'max-width: 1800px;',
    'extra_classes': 'my-custom-modal-class'
}
Important Tips:
  • Recommend using !important to ensure style priority
  • All standard CSS style properties are supported
  • Multiple styles can be combined, separated by semicolons
  • For responsive design, recommend using percentages or viewport units

Supported Dialog Types

This module extends all of the following Odoo core dialog components through patch mechanism:

Dialog

Base dialog component, parent class for all modals

ActionDialog

Action dialog for executing window actions

FormViewDialog

Form view dialog for creating and editing records

SelectCreateDialog

Select/create dialog for choosing existing records or creating new ones

X2ManyFieldDialog

Relational field dialog for One2many and Many2many fields

Technical Implementation

This module uses Odoo OWL framework's patch mechanism to extend standard dialog components:

  • Extend dialog component props using patch()
  • Automatically read modal_style configuration from context
  • Apply styles to DOM through XML template inheritance
  • Support configuration priority: props > context
  • Compatible with Odoo 18.0 and OWL 2.0 framework
Priority Rule:

According to memory specification, components prioritize props values first. If not present, then retrieve from context to ensure correct configuration priority.

Frequently Asked Questions

Add 'modal_style': 'max-width: 1800px !important;' to the context, where 1800px can be replaced with any width value you need.
Yes! Use 'modal_style': 'min-height: 600px; max-height: 90vh;' to control height. The vh unit represents a percentage of the viewport height.
Please ensure:
  • The module is installed and enabled
  • You've used !important to increase style priority
  • Context configuration format is correct
  • Clear browser cache and retry
Absolutely! Add configuration to the field's context attribute: <field name="partner_ids" context="{'modal_style': 'max-width: 90%'}" />
All standard CSS style properties are supported, including but not limited to: width, max-width, min-width, height, margin, padding, border, etc. Multiple properties can be combined separated by semicolons.

Contact & Support

For any questions or technical support, please feel free to contact us:

Company: YLHC Technology, co., ltd.

Website: https://www.ylhctec.com

Email: support@ylhctec.com

Odoo Proprietary License v1.0

This software and associated files (the "Software") may only be used (executed,
modified, executed after modifications) if you have purchased a valid license
from the authors, typically via Odoo Apps, or if you have received a written
agreement from the authors of the Software (see the COPYRIGHT file).

You may develop Odoo modules that use the Software as a library (typically
by depending on it, importing it and using its resources), but without copying
any source code or material from the Software. You may distribute those
modules under the license of your choice, provided that this license is
compatible with the terms of the Odoo Proprietary License (For example:
LGPL, MIT, or proprietary licenses similar to this one).

It is forbidden to publish, distribute, sublicense, or sell copies of the Software
or modified copies of the Software.

The above copyright notice and this permission notice must be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.

Please log in to comment on this module

  • The author can leave a single reply to each comment.
  • This section is meant to ask simple questions or leave a rating. Every report of a problem experienced while using the module should be addressed to the author directly (refer to the following point).
  • If you want to start a discussion with the author or have a question related to your purchase, please use the support page.