Spreadsheet Widget: How to hide the first row and column in the widget?

  • forusretail
    Asked on April 28, 2016 at 5:11 PM

    About the new spredsheet widget, I would like to know if I can hide the first row and column (A,B,C... and 1,2,3). Is it possible?

     

    Thanks

  • Kevin Support Team Lead
    Replied on April 28, 2016 at 5:17 PM

    Yes, this is possible by injecting custom CSS code to your widget, this is the code: 

    th{

    display: none;

    }

    To inject the code you will need to click on the widget, then click on the wizard icon. 

    Spreadsheet Widget: How to hide the first row and column in the widget?  Image 1 Screenshot 30

    Once you're there, click on the CSS tab and paste the code there.

    Spreadsheet Widget: How to hide the first row and column in the widget?  Image 2 Screenshot 41

    Here is my sample form where this code has been applied: https://form.jotform.com/61186655410959

     

  • MadGarcia
    Replied on October 17, 2016 at 3:12 PM

    In a similar way, is it possible to create different text on the first row and column? Like "A" would be "monday"

     

    Tnks

  • David JotForm Support
    Replied on October 17, 2016 at 4:43 PM

    Adding the following CSS to the widgets CSS section will allow for showing a different column header:

    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";
    }

    Change the text in between the quotes to change the columns headers.  This will allow for changing the first four column headers, if more are required, they can be set up by adding further columns in the CSS section.

    Please note that this does not change the actual column headers, it simply displays a different label over the actual label.  In the submission data, the headers will still show as A, B, C, D etc.

  • MadGarcia
    Replied on October 17, 2016 at 6:00 PM

    Would it not just change the columns text? What I what is to have the header rows with a diferent text.

    I've managed to create the text, but now my problem as to do with the width of the boxes, on the rows header.

    Can u help?

  • Chriistian Jotform Support
    Replied on October 17, 2016 at 10:27 PM

    You can change the text of the row headers by adding the css below:

    tbody > tr:first-child {

       background-color: #333;

    }

    #row_1, #row_2, #row_3, #row_4 {

       color: transparent;

       font-size: 1px;

    }

    #row_1:before, #row_2:before,#row_3:before,#row_4:before {

        color: #FFF;

        font-size: 14px;

    }

    #row_1:before {

       content: "International";

    }

    #row_2:before {

       content: "British Isles";

    }

    #row_3:before {

       content: "US & Canada";

    }

    #row_4:before {

       content: "Unknown";

    }

    You can change the yellow highlighted text and replace it with your preferred text. Here's how it should look after:

    Spreadsheet Widget: How to hide the first row and column in the widget?  Image 1 Screenshot 20

    Then to change the width of the row header, please add the css below:

    .r1 th {

        width: 150px;

    }

    If you need further assistance, please let us know.
    Regards.