CSS Coding for Input or Matrix Table

  • iconic_productions
    Asked on October 19, 2017 at 3:35 AM

    In my form i am using your Input Matrix Table.  What I need assistance with is to have the entire input table use the most of the space on the form from left to right, with maybe a padding of about 10px to the left and right.

    I copied some CSS codes from another support question and this has given the rows a nice width, but the columns are still too squashy, not equal/event and the matrix table still does not use most of the width of the form.

    In the support ticket https://www.jotform.com/answers/1194661-Matrix-column-width-adjustment

    They also had this wonderful option to have the top Headers of the Column stay fixed so that if the screen had to be scrolled up and down the actual Headers of the Columns can still be read.  I like this idea and tried to copy and paste in in my form, but the Header thing doesn't seem fixed and moving when I scroll through the long input tables on the Preview form.  

    Hope you can help like always.

  • Chriistian Jotform Support
    Replied on October 19, 2017 at 5:25 AM

    I'm currently checking your form. Allow me some time to further work on the CSS code. I'll get back to you once I'm done.

  • Chriistian Jotform Support
    Replied on October 19, 2017 at 5:45 AM

    To make the Input Table use most of the width of the form, you need to increase the max width of the matrix table and as well as the column headers. Please try injecting the custom CSS below:

     .form-matrix-table {

        max-width: 600px !important;

    }

    .form-matrix-column-headers {

        width: 30px;


    }


    15084057592017 10 19 1734 Screenshot 10

    Regarding the top headers of the column to stay fixed, the code that was provided on the other thread will not work on your form because it is intended to the Input table of the other form.

    Do let us know if you need further assistance.


  • iconic_productions
    Replied on October 19, 2017 at 6:23 AM

    Thank you for that.  Can you help me with keeping the Top Headers of the Columns fixed for each input table.

  • Nik_C
    Replied on October 19, 2017 at 10:42 AM

    I'll check this issue for you and get back when I find the working solution.

    Thank you.

  • Nik_C
    Replied on October 20, 2017 at 3:18 PM

    I'm sorry for the delay, I tried to find a CSS that will make it work, but I wasn't able to, apparently, that cannot work anymore in that way. As soon as you set the title of the columns in Input table with position: fixed, it disappears and I couldn't find the approach that will work:

    1508526991screencast Screenshot 10

    Maybe I'm wrong, but I guess it is is just not possible anymore to do that with input table headers.

    I'm sorry for this inconvenience.

    Thank you.