Spreadsheet Widget, change the size and row colors.

  • Profile Image
    adminweinguthuelsde
    Asked on November 26, 2014 at 11:47 AM
    I'm not good at CSS coding - can you also help to determine how to change the size of the rows and how to change their color?
  • Profile Image
    Ben
    Answered on November 26, 2014 at 01:19 PM

    Hi,

    I made this screenshot of your jotforms spreadsheet to better demonstrate where each class is located.

    To edit rows we need to edit the cells as well, as they will ultimately determine the width of the row.

    Here are all classes in the spreadsheet widget:

    .form-matrix-table
    .form-matrix-column-headers
    .form-matrix-column_0, .form-matrix-column_1, etc.
    .form-matrix-row-headers
    .form-matrix-values
    .form-number-input.form-dropdown

    Now to change the rows headers you would use this to change their background color to orange:

    .form-matrix-row-headers
    {
       background-color: orange;
    }

    If you want to change their width, you should do that by changing the width of the cells:

    .form-matrix-values
    {
       width: 30px;
    }

    To apply this code, you should inject it to your jotform following these steps: Inject Custom CSS Codes

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image
    TravisPerkins
    Answered on March 13, 2015 at 07:19 AM

    Ben

     

    How did you get the headers, A, B, etc to say specific words?

     

    Cheers

     

    Adam

  • Profile Image
    Ben
    Answered on March 13, 2015 at 10:40 AM

    Hi Adam,

    It should be possible with CSS and to help you with this I have moved your question to a new thread here: http://www.jotform.com/answers/532593 where we will help you set this up shortly.