List modal window size

Forms SharePoint Online
1

Hi there,
I have a classic list where i use Plumsail Forms forms (modern).
When i click new item, the new form opens in the popup dialog, however i am not able in any way to resize the dialog window.

I tried the code below but it does not work for me... i am assuming this will work only with a child form right?

fd.spRendered(function(){
//set width and height:
fd.control('SPDataTable0').dialogOptions = {
width: 1280,
height: 720
}
});

Is there a way to change the modal popup window width?
Thanks,
Tomas

2

Hello @TKey,

Do you mean that the form opens in the panel?

image
image763×559 76.1 KB

You can set up the size of the panel in the designer:
image

Or using the custom styling:

.ms-Panel-main{
  width: 1200px !important;
}

Please find more information about the form panel here.

4

image
image1393×709 39.2 KB

Hello Margarita,
No, i have a classic list where i use Plumsail Forms. I use modal dialog to show the form not the panel.
I have multiple columns in the form which makes them squished and I do not know how to make dialog wider.

I do want to use the popup dialog for SharePoint classic look and feel consistency (the form inside the dialog is modern Plumsail Forms form). When i use panel to display the form or a whole page, my list automatically switches to modern look and feel.

Thank you,

5

Hello @TKey,

You can change modal dialog size using this code:

fd.spRendered(function(){
    setTimeout(function(){
        //reduce distance from the left
        window.top.document.getElementsByClassName('ms-dlgContent')[0].style.left = "300px";
        //increase size of dialog and its contents
        window.top.document.getElementsByClassName('ms-dlgContent')[0].style.width = "1280px";
        window.top.document.getElementsByClassName('ms-dlgBorder')[0].style.width = "1260px";
        window.top.document.getElementsByClassName('ms-dlgFrame')[0].style.width = "1220px";
    }, 100);
});
6

How can you resize the height of the modal dialog to the max height of the users browser window?

7

Hello @Jaydius,

If you open a modern form in a modal dialog, use this code to change the dialog window height:


fd.spRendered(function(){
    setTimeout(function(){

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

If you open form in a dialog from the form, please see Managing dialog with JS article.