How to Format an Input Table?

  • Profile Image
    phillipsmgmt
    Asked on April 26, 2019 at 06:25 PM

    I would like to format the following items my input table.

    - Change the width of the entire table, as well as the width of the columns/rows (want it to proportional to my form width)
    - Change the background color of the title column/row
    - Change font size (anything in parenthesis I want below the text that is NOT in parenthesis)
    - When you click into the input table (while completing the form) the text changed from white to black. I want it to stay the same color.
    - I'd like the check to be a different color


    I was unsure how to do this in CSS editor in the aadvanced designer portion of the form.

  • Profile Image
    jherwin
    Answered on April 26, 2019 at 10:57 PM

    Please give us the form URL of the form you're working on so we can also look at it and provide you the right CSS code for your requirements.

    Guide: Where-to-Find-My-Form-URL

    Looking forward to your response.

  • Profile Image
    phillipsmgmt
    Answered on April 29, 2019 at 10:14 AM

    https://form.jotform.com/phillipsmgmt/Shuttle_Survey

  • Profile Image
    david
    Answered on April 29, 2019 at 11:57 AM

    I'll give an example of the code for each.

    -Change the width of the entire table, as well as the width of the columns/rows (want it to proportional to my form width)

    .form-matrix-table {
        min-width : 100% !important;
    }

    The width % value can be changed to adjust the overall width proportional to the form.

    -Change the background color of the title column/row

    Row headers background

    .form-matrix-row-headers {
        background : blue;
    }

    Column headers background

    .form-matrix-column-headers{
        background : green;
    }

    - Change font size (anything in parenthesis I want below the text that is NOT in parenthesis

    Row headers

    .form-matrix-row-headers {
        font-size : 18px;
    }

    Column headers

    .form-matrix-column-headers{
        font-size : 18px;
    }

    - When you click into the input table (while completing the form) the text changed from white to black. I want it to stay the same color.

    .form-line-error{
      color : white;
    }

    .form-line-active{
      color : white;
    }

    - I'd like the check to be a different color

    As far as I know, it is not possible to change the color of the check mark in the input table.


  • Profile Image
    phillipsmgmt
    Answered on April 29, 2019 at 12:21 PM

    This is great. Thank you so much. Final edit to this, how to I increase the row header width (Where the times are located) ?

    1556554875Screen Shot 2019-04-29 at 12.2

  • Profile Image
    david
    Answered on April 29, 2019 at 01:35 PM

    The the row header width, it would be as follow for a proportional width:

    .form-matrix-row-headers {
        min-width : 10%;
    }

    And this for a specific width:

    .form-matrix-row-headers {
        min-width : 20px;
    }

  • Profile Image
    phillipsmgmt
    Answered on April 29, 2019 at 02:35 PM

    I did not see a change in header row width when I entered that CSS (the first one (10%))

  • Profile Image
    david
    Answered on April 29, 2019 at 03:38 PM

    Try with an important tag, it looks like the theme is applied is applying styling to the table as well.

    .form-matrix-row-headers {
        min-width : 10% !important;
    }

  • Profile Image
    phillipsmgmt
    Answered on April 29, 2019 at 04:06 PM

    I am still not seeing the changes reflected on the form. Just in case there is a misunderstanding, the picture below is meant to clarify what I am looking for. I want all columns (Including the column containing all of the header rows) to be equal in width.

    1556568336Screen Shot 2019-04-29 at 12.2

  • Profile Image
    jherwin
    Answered on April 29, 2019 at 04:32 PM

    Try this custom CSS code:

    .form-matrix-row-headers {
        min-width : 20% !important;
        width:10%!important;
    }

    Guide: How-to-Inject-Custom-CSS-Codes

    You can change the 10% to your preference width.

    1556569801result.png