Change the rows name in Spreadsheet widget

  • Profile Image
    MadGarcia
    Asked on October 17, 2016 at 05:23 PM
    Is it possible to change the rows just like we did with the columns?
  • Profile Image
    John_Benson
    Answered on October 17, 2016 at 06:22 PM

    This is not possible but according to this thread, you can change it using custom CSS code.

    Here's the code:

    th#row_1,  th#row_2

        color: transparent;

     th#row_1:after {

        content: "Name in Row1";

        color: #fff;

        margin-left: -10px;

    }

     th#row_2:after {

        content: "Name in Row2";

        color: #fff;

        margin-left: -10px;

    }

    You can just change the number of the selector depending on the number of rows you have.

    If you have 5 rows, then you need to create 5 th#row_1-5 selectors. You also need to create 5 separate th#row_1-5:after selectors. Also, the row header will be the value you put in the content property.

    Here's a guide on how to insert custom CSS to the form. Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    MadGarcia
    Answered on October 17, 2016 at 06:59 PM

    Thank you very much! I finally managed somehow...

     

    Here's what i've done(never mind the numbers):

     

    tbody > tr:first-child {

       background-color: #333;

    }

     

    #col_A, #col_B, #col_C, #col_D, #col_E {

       color: transparent;

       font-size: 1px;

    }

     

    #col_A:before, #col_B:before,#col_C:before,#col_D:before, #col_E:before {

        color: #FFF;

        font-size: 12px;

    }

     

    #col_A:before {

       content: "Dia 13";

    }

     

    #col_B:before {

       content: "Dia 14";

    }

     

    #col_C:before {

       content: "Dia 15";

    }

     

    #col_D:before {

       content: "Dia 16";

    }

     

    #col_E:before {

       content: "Dia 17";

    }

     

     

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

       color: transparent;

       font-size: 1px;

    }

     

    .nowrap {

      white-space: nowrap;

    }

     

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

        color: #FFF;

        font-size: 12px;

    }

     

    #row_1:before {

       content: "9h-11h";

    }

     

    #row_2:before {

       content: "11h-13h";

    white-space: nowrap;

    }

     

    #row_3:before {

       content: "14h-16h";

    }

     

    #row_4:before {

       content: "16h-18";

    }