[Tutorial] Custom size dialog in ERPNext

Hello,

Many times we use dialogs in ERPNext to show reports or To fill information.
When we develop such dialog we need to increase dialog size.
In Frappe, we can easily set desired dialog size.
I am giving you sample code to increase dialog size.
Hope it will be helpful for all.

Code:

dialog = new frappe.ui.Dialog({
        title: __('Custom Size Dialog'),
          fields: [
              {fieldtype: "Section Break"},
              {"fieldtype": "Link" , "fieldname": "file" , "label": "Name", "options": "File"},

              {"fieldtype": "Text Editor" , "fieldname": "Message" , "label": "Message", "options": "File"},

            ],

      });

dialog.show()
dialog.$wrapper.find('.modal-dialog').css("width", "800px");

dialog.$wrapper.find('.modal-dialog').css("width", "800px"); will set dialog width to 800px, you can change this according to your requirement.

Thanks,
Sambhaji

26 Likes

Very helpful, thanks.

When I used this command, it did not show the desired effect, so I made some changes and successfully customized the Dialog, but the position seemed to be a little off.

dialog.$wrapper.find(‘.modal-content’).css(“width”, “800px”);

2 Likes

Thanks alot…, it works fine

In case someone tries this with V13, you got to follow this approach:

1 Like

When I used this command, it did not show the desired effect, what are the changes you made.