Dynamically changed height and width of modal

Applications Forms
#1

I have a grid, when you click on one of the field, a form in a modal will pop out.
First, there will only be one select field. When a certain value is selected, the hidden block with additional fields will appear.
Can I set the height so firstly it will be just as big as 1 field, and when the additional fields appear the height gets bigger??
Is it possible?

#2

Yes, with a little help from javascript. This might not be the perfect solution but very easy to implement in SC.
Here we go.

First set your application to be shown in a modal window to a fixed width.

Under ‘Lookup Settings’ of the select field:
Check the options ‘Reload form when value has changed’ and ‘Use title’ with the value field left empty (well, depends on your situation).

Create a Javascript Method (Section Programming) i.e. resizeModal.

Write some code like this


val = document.getElementById('id_sc_field_sel1').value; //where sel1 is the name of your select field.
if(val > '') // or whatever condition you need
{
    window.frameElement.style = 'height: 440px; width: 680px;'; 
else
{
    window.frameElement.style = 'height: 305px; width: 680px ';
}

Since the width is fixed in the settings, get both height values of your application (i.e. ‘Inspect Element’ tool in firefox).
The numbers here are a sample and depend on your application. You have to play around with them until the app fits.
A good start is by adding 25 to 30px to the values you got.

Then go to the Javascript section and chose ‘Form’ -> ‘onLoad’.
Type into the field: resizeModal();

Save an generate.

The last thing to do is to recreate the link to the form but only provide the width (value you provided in the form settings) and leave the hight empty.

That’s it.
Good luck. :slight_smile:

jsb

1 Like
#3

Wow, thanks a lot. It works. :slight_smile: