How to change the headers on the Spreadsheet widget?

  • Profile Image
    Estefania
    Asked on June 23, 2015 at 11:30 AM
    Ok, is there any way to change the column/row labels with the regular spreadsheet? Or is that only available on the Advanced Spreadsheet?
  • Profile Image
    Ben
    Answered on June 23, 2015 at 11:40 AM

    As mentioned, I am following up with the CSS code that will allow you to change the headers of your Spreadsheet widget.

    This is the CSS code:

    tbody > tr:first-child {
        background-color: #333;
    }
    #col_A, #col_B, #col_C, #col_D {
        visibility: hidden;
    }
    #col_A:before, #col_B:before,#col_C:before,#col_D:before {
        visibility: visible;
    }
    #col_A:before {
        content: "International";
    }
    #col_B:before {
        content: "British Isles";
    }
    #col_C:before {
        content: "US & Canada";
    }
    #col_D:before {
        content: "Unknown";
    }

    If you need to change the text in any of them, you can do so easily by changing the bold parts of the code above.

    Also, if it seems as if it is not working in your Form Builder, do take a look at the widget in the Preview window instead to check it out instead and you will see it showing as it should.

    You can see it in action here: http://form.jotformpro.com/form/51734880493968

    Also, to apply the CSS code you must go to the widgets wizard, by clicking on the wand like icon in the top right corner of the widget:

    Once you do, just scroll down in the wizard until you see the Custom CSS field of the widget and just paste the code in there and click on Finish.

    Do let us know how it goes Estefania.

  • Profile Image
    Estefania 
    Answered on June 23, 2015 at 06:32 PM

    Unfortunately, that doesn't work either.

    Most of the CSS makes sense but because you have the following:

    this deletes the column labels. If that is deleted, it shows "InternationalA" which doesn't fix the problem either.

    #col_A, #col_B, #col_C, #col_D {
        visibility: hidden;

    Can you adjust the CSS so it will work?

     

     

  • Profile Image
    raul
    Answered on June 23, 2015 at 07:38 PM

    Please try using the following code instead:

    tbody > tr:first-child {
       background-color: #333;
    }

    #col_A, #col_B, #col_C, #col_D {
       color: transparent;
       font-size: 1px;
    }

    #col_A:before, #col_B:before,#col_C:before,#col_D:before {
        color: #FFF;
        font-size: 14px;
    }

    #col_A:before {
       content: "International";
    }

    #col_B:before {
       content: "British Isles";
    }

    #col_C:before {
       content: "US & Canada";
    }

    #col_D:before {
       content: "Unknown";
    }

    This would produce the following result: 

    You can see a cloned version of your form here: http://form.jotformpro.com/form/51737638418969 feel free to clone it to your account if you want to.

  • Profile Image
    Estefania 
    Answered on June 26, 2015 at 03:18 PM

    Hello,

    Question, we updated our form with the Spreadsheet widget which works really well now. However, we encountered two problems:

    1. Spreadsheet widget doesn't show up on IE. Can that be fixed?

    2. When the form is submitted, it still has the original A-D columns instead of the labels we put on there. can that be fixed?

     

    Thanks!

  • Profile Image
    david
    Answered on June 26, 2015 at 04:23 PM

    I have moved your new questions to a separate thread.  I will update you with my response in this thread here shortly:

    http://www.jotform.com/answers/597755

  • Profile Image
    Mike_Graf
    Answered on June 02, 2017 at 10:16 AM

    I was able to change my headings but when I go to review my submissions on the PDF or Excel report, the columns read A,BC. Even though the headings read something different. Is there anyway I can get the columns to be the same as the form and not go back to A,B,C?
  • Profile Image
    Nik_C
    Answered on June 02, 2017 at 11:03 AM

    @Mike_Graf.

    I opened a separate thread for your question and we will attend it here: 

    https://www.jotform.com/answers/1161598

    Thank you!