Jump to content
  • 0

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


cordova
 Share

Question

1 answer to this question

Recommended Posts

  • 0

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.

image.png.00f7db665ab271b4092b8b5e5e34912e.png

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:

image.thumb.png.ea7913908f2691e8558747d54056c5d6.png

 

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.

image.png.1dda5ad65ab7b4675b8ca19e094ef6ac.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...