[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

25 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