Place Some Fields of a Submission Form in a Container that is Scrollable

[cordova]

Hi,

 

I want to know whether it is possible in a submission DataPage to place some fields in a container and make that container scrollable.

[futurist]

Hi,

 

You can do this with a bit of CSS.

 

1)     On your DataPage, add two HTML blocks and place all of the fields you want to place in the container between these HTML blocks.

1)     Disable the HTML editor on both of these HTML blocks. On the first HTML block, add an opening div tag:

<div>

 

2) Then, place the closing div on the second HTML block:

</div>

 

 

3)     Preview your DataPage and Inspect Element on the DataPage. Hover your mouse over the area where you placed the HTML blocks and you should see a container containing the entire group of fields you placed between these blocks:

 

Take note of the class name (in this case, cbFormBlock11)

 

4)     Back to your DataPage configuration, add a Header & Footer and disable the HTML editor of your header.

5)     Paste the following code, but make sure to change the “cbFormBlock11” to whatever is the class name as mentioned in step 3.

<style>

div[class*="cbFormBlock11"]{

    height: 300px !important;

    overflow: scroll !important;

    margin: 10px !important;

    border: 1px solid black !important;

}

</style>

 

You can change the styling based on your preference.

 

6)     Save your changes.

Your DataPage should look something like this.