CSS Coding for Input or Matrix Table

  • Profile Image
    iconicperformances
    Asked on October 19, 2017 at 03: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.

  • Profile Image
    Chriistian
    Answered on October 19, 2017 at 05: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.

  • Profile Image
    Chriistian
    Answered on October 19, 2017 at 05: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.png

    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.


  • Profile Image
    iconicperformances
    Answered on October 19, 2017 at 06:23 AM

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

  • Profile Image
    Nik_C
    Answered 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.

  • Profile Image
    Nik_C
    Answered on October 20, 2017 at 03: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.gif

    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.