Input Table: How to display headers vertically and reduce the cells size?

  • noidifercam
    Asked on February 19, 2019 at 9:19 AM

    Hello,

    I was able to transform the text orientation in matrix column headers in order to show it as vertical, but I can't reduce the width of the columns now. I need to be able to fit a person's name in row headers, but I wish the other cells (with the checkbox) to be smaller.

    This is the form: https://form.jotformeu.com/90492797043364 

    How can I do this?

    Here is my CSS:

    #cid_5 th.form-matrix-column-headers {

        transform : translate(0px, -25px)

                    rotate(270deg);

        position : relative;

        white-space : nowrap;

        height : 150px;

        background-color : transparent;

        text-align : left;

    }

     

    .form-matrix-row-headers {

        min-width : 200px;

    }

     

    Thank you for your help!

    Jotform Thread 1737070 Screenshot
  • Kevin Support Team Lead
    Replied on February 19, 2019 at 1:14 PM

    I have been testing this further and found a bit impossible to reduce the table size with the current code you provided, instead, you need to do the following: 

    1. Reduce the size of the current headers. 

    2. Set the header text with CSS code. 

    Now, you will need to replace the code you currently have with this one: 

    #cid_5 th.form-matrix-column-headers {

         transform:rotate(270deg);

         white-space: nowrap; 

         background-color: transparent; 

         height: 125px;

         font-size: 0px;

         margin-bottom: -10px !important;

    }


    #cid_5 .form-matrix-table td, #cid_5 .form-matrix-table tr, #cid_5 .form-matrix-table th {

        width: 10px !important;

    }

    Now, to set the table headers you may use this code: 

    #cid_5 .form-matrix-column_0:before {

        content: "BOLLETTAZIONE DIT";

        font-size: 10px;

        position: absolute;

        margin-left: -60px !important;

        margin-top: -5px !important;

    }

    You will only need to change the following line of code ".form-matrix-column_0" and increase the 0 according to the column you're setting the header, so for the second one you would use ".form-matrix-column_1" and so on. Besides updating that you will also need to change the text in the "content" according to each column. 

    This guide will help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps.