How to make the Input Table scrollable while the headers are pinned?

Hi.

I can't seem to figure out how to enable vertical scroll on a very long input table. I've attached a link to my form below.

Thanks,
Michele

Hi Michele,

Thanks for reaching out to Jotform Support. You can easily make your Input Table shorter and add a vertical scroll bar by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

div#cid_4,

div#cid_71,

div#cid_20,

div#cid_22,

div#cid_23,

div#cid_21,

div#cid_24 {

  max-height: 400px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.

Hi and thank you.

I apologize, because I wasn't clear in my question. I want it to scroll, and I also want the top row of the input table to remain in the view like in the screencast here.

Thanks,
Michele

Hi Michele,

You can add the code below to ensure that the Input Table header stays pinned to the top when scrolling vertically:

/*Sticky Input Table Header - 28543291*/

div#cid_4 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_71 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_20 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_22 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_23 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_21 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_24 tr.form-matrix-tr.form-matrix-header-tr > th {

  position: sticky;

  top: 0;

  z-index: 10;

}

div#cid_4 th.form-matrix-headers.form-matrix-row-headers,

div#cid_71 th.form-matrix-headers.form-matrix-row-headers,

div#cid_20 th.form-matrix-headers.form-matrix-row-headers,

div#cid_22 th.form-matrix-headers.form-matrix-row-headers,

div#cid_23 th.form-matrix-headers.form-matrix-row-headers,

div#cid_21 th.form-matrix-headers.form-matrix-row-headers,

div#cid_24 th.form-matrix-headers.form-matrix-row-headers {

  position: sticky;

  left: 0;

  z-index: 10;

}

/*end of code*/

Reach out again if there’s anything else we can help you with.

Thank you so much!

Oh no but that messes up the hover text....

Hi Michele,

You can copy the code below and replace the whole Custom CSS of your form so your hover text will be visible.

.form-all {

  border-radius: 12px;

  box-shadow: 0 0 32px rgba(42, 42, 42, 0.16);

}





.form-header-group.header-small {

  padding: 0 !important;

  border-radius: 6px 6px 0 0;

  margin: 0 -38px;

}





.form-header-group.header-small h3 {

  text-transform: uppercase;

  font-size: 34px;

  font-weight: 600;

  padding-left: 48px;

  color: #2c3345;

}





.form-header-group.header-small .form-subHeader {

  color: #2c3345;

  font-weight: 300;

  padding-left: 48px;

}





.form-header-group.hasImage.header-small {

  flex-direction: row !important;

}





.header-logo img {

  vertical-align: bottom;

}





/*@media screen and (max-width: 560px){

}





.form-header-group.header-small .form-subHeader {

    font-size : 14px;

    padding-left : 20px;

}





}





@media screen and (max-width: 380px){

}





.form-header-group.header-small .form-subHeader {

    font-size : 11px;

}





}





@media screen and (max-width: 768px){

}





}





@media screen and (max-width: 480px){

}





}*/





.form-input-table {

  max-height: 500px !important;

  display: block;

  overflow-y: auto;

}





label#label_4_row_11:after,

label#label_4_row_6:after,

label#label_4_row_3:after,

label#label_4_row_4:after,

label#label_4_row_7:after,

label#label_20_row_7:after,

label#label_21_row_0:after,

label#label_22_row_17:after,

label#label_22_row_5:after,

label#label_22_row_8:after,

label#label_22_row_12:after,

label#label_22_row_9:after,

label#label_22_row_1:after,

label#label_22_row_18:after,

label#label_22_row_0:after,

label#label_23_row_13:after,

label#label_23_row_18:after,

label#label_23_row_6:after,

label#label_23_row_12:after,

label#label_23_row_19:after,

label#label_24_row_13:after {

  display: none;

  position: block !important;

  background: white;

  padding: 0px;

  z-index: 99;

  padding: 3px;

  border-radius: 5px;

  border: 1px solid #b5b4b4;

}





label#label_4_row_11:hover:after {

  content: "A learning preference is a way in which you like to learn or study. For example: do you prefer to read or listen to books? Do you like to take notes while you read? Do you listen to music while studying?" !important;

  display: block !important;

}





label#label_4_row_6:hover:after,

label#label_4_row_3:hover:after,

label#label_4_row_7:hover:after,

label#label_4_row_4:hover:after {

  content: "Challenges are ways in which your diagnoses may make learning and other tasks difficult." !important;

  display: block !important;

}





label#label_20_row_7:hover:after {

  content: "Both at home and in your locker, desk or backpack" !important;

  display: block !important;

}





label#label_21_row_0:hover:after {

  content: "An external reward is something you get from someone else. This includes praise or recognition form parents, teachers, friends, etc." !important;

  display: block !important;

}





label#label_22_row_17:hover:after {

  content: "You have a way to look up how you spend money and make sure you only spend what you have " !important;

  display: block !important;

}





label#label_22_row_5:hover:after {

  content: "You do not rely on any other people to make sure you are out of bed and getting ready" !important;

  display: block !important;

}





label#label_22_row_8:hover:after {

  content: "This includes consistently following house rules for handling  dirty dishes, left over food/ingredients, and dirty or messy prep areas" !important;

  display: block !important;

}





label#label_22_row_12:hover:after {

  content: "Includes apps like Google Maps and Waze" !important;

  display: block !important;

}





label#label_22_row_9:hover:after {

  content: "Includes your bedroom and bathroom and any other spaces used only by you" !important;

  display: block !important;

}





label#label_22_row_1:hover:after {

  content: "It is OK if someone drives you there or goes with you" !important;

  display: block !important;

}





label#label_22_row_18:hover:after {

  content: "An impulse purchase is something you buy in the moment that you do not need and had not planned to purchase" !important;

  display: block !important;

}





label#label_22_row_0:hover:after {

  content: "This includes showering and washing hair regularly, brushing teeth daily, using deoderant regularly, brushing hair, etc." !important;

  display: block !important;

}





label#label_23_row_13:hover:after,

label#label_23_row_12:hover:after {

  content: "A social cue be verbal or non-verbal. " !important;

  display: block !important;

}





label#label_23_row_18:hover:after,

label#label_23_row_19:hover:after {

  content: "I follow the rules and norms of the environment" !important;

  display: block !important;

}





label#label_23_row_6:hover:after {

  content: "This can include tone and volume of speech and the words you use" !important;

  display: block !important;

}





label#label_24_row_13:hover:after {

  content: "This refers to an average number of pages of assigned reading for your classes" !important;

  display: block !important;

}





#cid_4 > table > tbody > tr > th:nth-child(1) {

  width: 20% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(2) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(3) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(4) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(5) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(6) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(7) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(8) {

  width: 10% !important;

}





#cid_4 > table > tbody > tr > th:nth-child(9) {

  width: 10% !important;

}





.form-matrix-row-headers {

  padding: 10px;

}





.form-matrix-column-headers {

  padding: 10px !important;

}





#cid_4,

#cid_23 {

  overflow: scroll !important;

}

/*Scrollable Input Table - 28543291*/

div#cid_4,

div#cid_71,

div#cid_20,

div#cid_22,

div#cid_23,

div#cid_21,

div#cid_24 {

  max-height: 400px !important;

}

/*Sticky Input Table Header - 28543291*/

div#cid_4 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_71 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_20 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_22 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_23 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_21 tr.form-matrix-tr.form-matrix-header-tr > th,

div#cid_24 tr.form-matrix-tr.form-matrix-header-tr > th {

  position: sticky;

  top: 0;

  z-index: 10;

}

div#cid_4 th.form-matrix-headers.form-matrix-row-headers,

div#cid_71 th.form-matrix-headers.form-matrix-row-headers,

div#cid_20 th.form-matrix-headers.form-matrix-row-headers,

div#cid_22 th.form-matrix-headers.form-matrix-row-headers,

div#cid_23 th.form-matrix-headers.form-matrix-row-headers,

div#cid_21 th.form-matrix-headers.form-matrix-row-headers,

div#cid_24 th.form-matrix-headers.form-matrix-row-headers {

  position: sticky;

  left: 0;

  z-index: 10;

}

/*end of code*/

Take a look at the screenshot below to see how it looks after:

Give it a try and reach out again if you have any other questions.

Thanks. I know my CSS is a mess haha

The last thing I would like to have happen is for the row headers to disappear when they've scrolled up. So, for this

to turn into this

Hi Michele,

We’ll need a bit of time to look into this. We'll get back to you as soon as we can.

We appreciate your patience and understanding in this.

Hi Michele,

After checking, since the space above 'I can identify and explain my academic strengths.' is empty, unlike 'I’m not able to do this on my own yet' that is filled with text and border, it isn't possible to make it sticky. One of the possible way is to add JavaScript. However, due to security measure, it isn't possible to add JavaScript into the form.

Let us know if you need more help.

Thanks. I appreciate your help working through this.