Change size of Plumsail form when in dialog

Forms SharePoint 2019
1

Hi,

Running a Plumsail form on a SharePoint SP2019 farm onprem.
The Plumsail form opens on the classic view, in a dialog.

Is it possible to resize the Plumsail dialog box?

2025-02-17_17-04-53
2025-02-17_17-04-531918×882 144 KB

I can check if the form is open in a dialog with

fd.spRendered(function () { 
    console.log('*** fd.spRendered ***');
        
    if (fd.isDialog){
        console.log("fd.isDialog");
        }
        
});

Is is possible to make size 90% of the width and heigth of the parent window?

kind regards,
bartplessers

2

Hello @bartplessers,

You can use this code to change the dialog window size:

fd.spRendered(function(){
    setTimeout(function(){
       //adjust size as needed 
        window.top.document.getElementsByClassName('ms-dlgBorder')[0].style.height = '100%';        
        window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.height = '100%'; 
        window.top.document.getElementsByClassName('ms-dlgContent')[0].style.height = '100%';    
        window.top.document.getElementsByClassName('ms-dlgFrameContainer')[0].style.height = '100%'; 

    }, 100);
});
3

Nice one! Thanx.

One more question: with

    setTimeout(function () {
        //adjust size as needed 
        window.top.document.getElementsByClassName('ms-dlgBorder')[0].style.height = '95%';
        window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.height = '95%';
        window.top.document.getElementsByClassName('ms-dlgContent')[0].style.height = '95%';
        window.top.document.getElementsByClassName('ms-dlgFrameContainer')[0].style.height = '95%';

        window.top.document.getElementsByClassName('ms-dlgBorder')[0].style.width = '95%';
        window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.width = '95%';
        window.top.document.getElementsByClassName('ms-dlgContent')[0].style.width = '95%';
        window.top.document.getElementsByClassName('ms-dlgFrameContainer')[0].style.width = '95%';

}, 100);

the dialog has it size, but it starts rendering in the "middle" of the browser window before it is resized, resulting in:

2025-02-18_9-57-10
2025-02-18_9-57-101690×816 97.1 KB

Do you have some magic to reposition the dialog to the center of the browser window?

kind regards,
bartplessers

4

Hi,

This seems satisfying....

    if (fd.isDialog) {
        console.log("fd.isDialog");
        setTimeout(function () {
            //adjust size as needed 

            let width = window.parent.innerWidth;
            let height = window.parent.innerHeight;

            //console.log(width);
            //console.log(height);

            window.top.document.getElementsByClassName('ms-dlgFrameContainer')[0].style.width = (width - 50).toString() + "px";

            window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.width = '100%';
            window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.height = (height - 100).toString() + "px";

            window.top.document.getElementsByClassName('ms-dlgContent')[0].style.width = (width - 10).toString() + "px";
            window.top.document.getElementsByClassName('ms-dlgContent')[0].style.height = (height - 10).toString() + "px";
            window.top.document.getElementsByClassName('ms-dlgContent')[0].style.left = '5px';
            window.top.document.getElementsByClassName('ms-dlgContent')[0].style.top = '5px';

            window.top.document.getElementsByClassName('ms-dlgBorder')[0].style.width = (width - 20).toString() + "px";

        }, 100);

    }