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

    How to set headers in Spreadsheet widget to show custom text?

    Asked by TravisPerkins on March 13, 2015 at 10:40 AM

    Ben

     

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

     

    Cheers

     

    Adam

    spreadsheet widget change headers custom text CSS
  • Profile Image

    Answered by Ben on March 13, 2015 at 11:25 AM

    To do this Adam we will need to apply some CSS.

    I will show you the example on first column:

    1st step - hide the original header text (in our case A)

    th#col_A {
        max-width: 0;
        visibility: hidden;
    }

    We have now made sure that it does not take a lot of space (max-width rule) and that it is hidden.

    2nd step - add our own text (in stead of A)

    th#col_A:before {
        content: "My text 1";
        visibility: visible;
    }

    This will now add the text "My text 1" instead of "A" in the headers and since the main element is set to be hidden, this one must be set to visible to work.

    Now, you will notice that we lost the background color of the header element, but that is OK, we can simply restore it.

    3rd step - restore the background (we need to add this rule only once)

    tr:first-child {
        background: none #666666;
    }

    Once we add that, it will immediately show us the difference and it will seem as nothing had happened.

    4th step - repeat the step 1 and 2 for all headers that you need

    In my example I used A, B, C, D, E, F and changed them to "My text #" respectively.

    This is the code for the first column:

    tr:first-child {
        background: none #666;
    }
    th#col_A {
        max-width: 0;
        visibility: hidden;
    }th#col_A:before {
        content: "My text 1";
        visibility: visible;
    }

    and this is the code for all 6 of them:

    tr:first-child {
        background: none #666;
    }
    th#col_A {
        max-width: 0;
        visibility: hidden;
    }
    th#col_A:before {
        content: "My text 1";
        visibility: visible;
    }
    th#col_B {
        max-width: 0;
        visibility: hidden;
    }
    th#col_B:before {
        content: "My text 2";
        visibility: visible;
    }
    th#col_C {
        max-width: 0;
        visibility: hidden;
    }
    th#col_C:before {
        content: "My text 3";
        visibility: visible;
    }
    th#col_D {
        max-width: 0;
        visibility: hidden;
    }
    th#col_D:before {
        content: "My text 4";
        visibility: visible;
    }
    th#col_E {
        max-width: 0;
        visibility: hidden;
    }
    th#col_E:before {
        content: "My text 5";
        visibility: visible;
    }
    th#col_F {
        max-width: 0;
        visibility: hidden;
    }
    th#col_F:before {
        content: "My text 6";
        visibility: visible;
    }

    Notice that we only added the background color rule once at the top and that the code to change the header is always hiding the element, then adding the rule that goes in front of it.

    While the order is not as important, doing it this way it allows you to rule out precedence if there are any issues with it.

    I would also like to point out the construction of our rule here:

    th#col_F

    If you take a closer look, you will see that all we changed was A, B, C, D, E and F at the end of it, so the rules always started with th#col_.

    This means that it is easy to find the one that we want and quickly re-style it.

    Do note that this change is only shown change and that all data would still be handled as A, B, C, etc internally, including the way you declare and associate the cells in the widget wizard.

    Now to use the CSS code you should add it to the Spreadsheet widget custom CSS field.

    You can do that by clicking on it and clicking on the wand like icon in the quick action bar

    Or you can access the same option from the toolbar (shown after you click on the widget)

    Hope this helps, but do let us know if you have any further questions and we would be happy to assist.

    You can also clone and take a look at the example here: http://form.jotformpro.com/form/50706589744971

  • Profile Image

    Answered by VUeResearch on August 21, 2015 at 02:36 AM

    Followed your example step by step but in chrome the header is now one white bar, same as in your example form

  • Profile Image

    Answered by Sammy on August 21, 2015 at 06:01 AM

    It seems the grey background is not getting applied in both chrome and IE, you can remedy this by changed all the visibility properties to visible