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

  • Profile Image
    volkanarslan_fb
    Asked on March 10, 2021 at 08:58 AM
    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?
  • Profile Image
    Patrick_R
    Answered on March 10, 2021 at 09:51 AM

    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!

  • Profile Image
    volkanarslan_fb
    Answered on March 10, 2021 at 09:59 AM

    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

  • Profile Image
    Welvin
    Answered on March 10, 2021 at 02:38 PM

    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

  • Profile Image
    volkanarslan_fb
    Answered on March 10, 2021 at 03:54 PM

    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


  • Profile Image
    Welvin
    Answered on March 10, 2021 at 05:02 PM

    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

  • Profile Image
    Welvin
    Answered on March 10, 2021 at 06:40 PM

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

    Thanks

  • Profile Image
    volkanarslan_fb
    Answered on March 11, 2021 at 04:27 AM

    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

  • Profile Image
    Patrick_R
    Answered on March 11, 2021 at 06:40 AM

    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!