Is there a way to freeze the top of the Input Table?

Secondly, is there a way to freeze the top row of the input table, so the labels would be visible even when we scroll down?

Hello! Yes, it is possible; but we'll need to set input table's height. As an example, please check this form: https://form.jotform.com/210684123902045

Try scrolling the input table. Here input table's height has to be reduced. If this solves your purpose, let us know; we can prepare code for your form.

Thank you!

Hi Patrick,

Yes, that looks perfect! Please prepare a code for our form.

If you could do the same for the rows (freezing the questions) and add that to the code, that would be amazing!

Thank you very much in advance.

BR

V

My colleague's demo has a scrollbar on the input table field. I want to know if you really meant to do it just like that or do you mean to stick the input table headers when you scroll the whole form page? My colleague's form only contains the input table.

Here's a cloned of my colleague's form with more fields in it.

https://form.jotform.com/210685916277970

As you could see, the sticky header only works on the input table frame, not on the form.

Thanks

Hi,

Yes, I only want the headers to be fixed for the table input field similar to the example provided, not for all the page. I asked about whether you can do the same trick for the first column (let's say if you zoom in and scroll right, I want those column numbers to be frozen for the input table field)

Another example, if you freeze panes on excel, you freeze both the top row and the first column. I would like to create something like that.

Could you please share the CSS code for the requested input table where both the top row and first column are frozen?

If that is not possible, only the CSS code for the frozen top row as it was shared before (https://form.jotform.com/210684123902045)

Thanks in advance,

Volkan

For the headers, apply the following custom CSS codes:

div#cid_15{ position: relative; height: 400px; overflow: auto;}div #cid_15 tr.form-matrix-tr.form-matrix-header-tr > th { position: sticky;top: 0; z-index: 10;}

Adjust the 400px to your preferred height.

To freeze the 1st column, apply the following custom CSS Codes:

div#cid_15 th.form-matrix-headers.form-matrix-row-headers {  position: sticky;  left: 0;}

Thanks

Thanks, but the code didn't work. When you scroll down, headers are not frozen. I thought it was because of the other code I have for the same table (see below). It didn't work when I cleared the previous code either.

@media screen and (max-width:

800px){

 table.form-matrix-table{

 font-size: 10px;

 }

 table.form-matrix-table .form-matrix-headers.form-matrix-column-headers,

 table.form-matrix-table .form-matrix-headers.form-matrix-row-headers{

 padding: 1px;

 }

}

I need both these functionalities to work at the same time (fitting arrangements and freezing columns/rows)

Thanks,

Volkan

I'm sorry, I pasted "the" rather than just "th". I've corrected that in your form. Kindly check again.

Thanks

Hi,

The headers (1st row) is now frozen. However, it doesn't work for the 1st column (questions). That's important for the app users as they need to scroll right to see the questions and the labels at the same time.

Can you plz do that and make sure it works on the app?

Thanks,

V

Hello! Please check this form: https://form.jotform.com/210693126528961?jumpToPage=3

The questions horizontally scroll too in this demo. If this solves your purpose, then you can implement this code on your form.

div#cid_15{

 position: relative;

 height: 400px;

 overflow: auto;

}

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

 position: sticky;

 top: 0;

 z-index: 10;

}

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

 position: sticky;

 left: 0;

 z-index: 10;

}

In case it doesn't help or if you have any questions, let us know.

Thank you!