[Tutorial] Custom size dialog in ERPNext

[kolate_sambhaji]

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

[yemikudaisi]

Very helpful, thanks.

[Eric_Qin]

@kolate_sambhaji

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

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”);

[EliusMgani]

Thanks alot…, it works fine

[Leo]

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

Frappe V 13 Can't change dialog width

Dear All, I used the below code in V 12 to change the width of dialog and it worked great. But now in V 13 it is not working any more. let d = new frappe.ui.Dialog({ title: 'Enter details', fields: [ { label: 'First Name', fieldname: 'first_name', fieldtype: 'Data' } ], primary_action_label: 'Submit', primary_action(values) { console.log(values); d.hide(); } }); d.show(); d.$wrapper.find('.modal-dialo…

[sumanth]

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

[Omar-Abdullah]

@Eric_Qin

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

I further enhanced this code to be centered in the page rather than showing to the left of the page:

dialog.$wrapper.find('.modal-content').css({
	'width': '800px',
	'margin': '0 auto',
	'left': '50%',
	'transform': 'translateX(-50%)'
});