[Tutorial] Custom size dialog in ERPNext

Frappe Framework App Development
1

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.

customsizedialog.png1212×677 43.1 KB

Thanks,
Sambhaji

27 Likes
2

Very helpful, thanks.

3

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
4

Thanks alot…, it works fine

5

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

1 Like
6

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