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

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

    Ben

     

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

     

    Cheers

     

    Adam

  • Ben
    Replied 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

    How to set headers in Spreadsheet widget to show custom text? Image 1 Screenshot 30

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

    How to set headers in Spreadsheet widget to show custom text? Image 2 Screenshot 41

    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

  • VUeResearch
    Replied on August 21, 2015 at 2:36 AM

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

  • Sammy
    Replied on August 21, 2015 at 6: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