Pop up modal form size

Hi, when I have linked a child list to a parent list, and want to add a new item to this, the form for the child list pops up in a modal form. Is there any way to change the size of this pop up? or to make the input fields longer? They are a bit short when you need to input text in the fields. Look at the attached image

Hi!

You can adjust a size of the pop-up window by setting ‘dialogOptions’ parameter of List/Library control: https://plumsail.com/docs/forms/javascript/controls.html#list-or-library

Like this:

fd.control('SPDataTable0').dialogOptions = {
    width: 1280,
    height: 720
}

You can also adjust the Parent Grid Width property from 6 to 12 for child form to increase field size:

Screenshot_12

Hi, tried putting the code in the Javascipt console of the parent form, but it didnt change size.

Is it correct to put the code in there?

Hi!

Sorry for a late reply.

You just need to put this code in spRendered() event handler, like this:

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

This event handler is the best place to run your JavaScript since all elements are already built and rendered. See more information about the events: https://plumsail.com/docs/forms/javascript/manager.html

Thanks! That worked perferct!

Hi, sorry to tag on to this but was hoping there is a quick way to detect which device (i.e. which form phone,mobile or desktop) and then choose different dialog options based on them. I can't see anything in the docs that can grab which version of the form 'view' you are in. Is this possible?

Edit - I think I can do this using the window.innerWidth value, but is there a better way (in Forms framework?).

Thanks, Andy

Hello @abolam,

You can check the window size width with screen.width property and specify dialog size for different devices.

Please see the code sample below.

fd.spRendered(function(){

    // tablet
    if (screen.width < 1200 && screen.width > 900) {
        fd.control('SPDataTable0').dialogOptions = {
            width: 900,
            height: 500
        }
    // mobile
    } else if (screen.width < 900) {
        fd.control('SPDataTable0').dialogOptions = {
            width: 400,
            height: 300
        }
    }
});