Changing column and row headers in spreadsheet widget

  • Profile Image
    sshepperd
    Asked on August 25, 2017 at 09:21 AM

    I would like to be able to edit the text in the column and row headers in the spreadsheet widget.  It currently has letters for columns and numbers for rows.  

  • Profile Image
    Welvin
    Answered on August 25, 2017 at 10:45 AM

    There is no option in the widget to replace the column headers and row numbers. A workaround would be to do it by a custom CSS codes.

    For example, inject the following custom CSS codes in the widget to replace the text of Column A.

    th#col_A {

        color: transparent !important;

    }

    th#col_A:before {

        content: "Love";

        color: #fff;

    }

     

    Then the following to replace the text of Row 1:

    th#row_1 {

        color: transparent !important;

    }

    th#row_1:before {

        content: "Your Text";

        color: #fff;

    }

     

    Just repeat the same for the others, but make sure to replace the column letter and row number.  Note that you can group the CSS to make the text transparent in the Row Numbers and Column Letters. For example:

    th#col_A,  th#row_1 {

        color: transparent !important;

    }

     

    Separate the ID selectors by comma and space or just comma. 

    Let us know if you need further assistance. 

  • Profile Image
    Welvin
    Answered on August 25, 2017 at 10:46 AM

    I forgot to add the guide, here's our guide on how to inject a custom CSS codes in the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets