What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Spreadsheet Widget, change the size and row colors.

    Asked by adminweinguthuelsde 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?
    spreadsheet widget CSS spreadsheet styling
  • Profile Image

    Answered by Ben 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

    Answered by TravisPerkins 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

    Answered by Ben 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.