How I can hide a cell of a spreadsheet widget to make the table looks nicer?

  • Profile Image
    countrystate
    Asked on September 26, 2017 at 12:05 AM

    Hi,

    ive got a table that has total and subtotal fields i would like to hide the cells that are not in use and only shows the cells that have data.


    how i can hide a cell of a spreadsheet widget to make the table looks nicer

    i crossed out the cells in red colour on attached image

  • Profile Image
    BJoanna
    Answered on September 26, 2017 at 03:27 AM

    I made some tests and it seems that it is not possible to hide the cells inside of the Spreadsheet widget. I will make few more tests and if I find a solution I will let you know.

  • Profile Image
    BJoanna
    Answered on September 26, 2017 at 04:01 AM

    I was able to do it. Add this CSS code to the Spreadsheet widget Custom CSS:

    table {

        background: transparent;

    }

    th#row_7,input#A7.cell-input,input#B7.cell-input,input#C7.cell-input,input#D7.cell-input{

    visibility: hidden;

    }

    th#row_8,input#A8.cell-input,input#B8.cell-input,input#C8.cell-input,input#D8.cell-input{

    visibility: hidden;

    }

    th#row_9,input#A9.cell-input,input#B9.cell-input,input#C9.cell-input,input#D9.cell-input{

    visibility: hidden;

    }

    td {

        border-left:none;

    }

    td, tr:first-child th {

        border-top: none;

    }

    table{border:none}

    input#A1,input#B1,input#C1,input#D1,input#E1,input#F1,

    input#A2,input#B2,input#C2,input#D2,input#E2,input#F2,

    input#A3,input#B3,input#C3,input#D3,input#E3,input#F3,

    input#A4,input#B4,input#C4,input#D4,input#E4,input#F4,

    input#A5,input#B5,input#C5,input#D5,input#E5,input#F5,

    input#A6,input#B6,input#C6,input#D6,input#E6,input#F6,

    input#E7,input#F7,

    input#E8,input#F8,

    input#E9,input#F9{

         border-left:1px solid black;

         border-bottom: 1px solid black;

    }

    input#F1,input#F2,input#F3,input#F4,input#F5,input#F6,input#F7,input#F8,input#F9{

         border-right:1px solid black;

    }

    After you add The CSS codes, the Spreadsheet widget will look like this.

    Here is my demo form: https://form.jotformpro.com/72681169079972 

    Feel free to test it and clone it

    Hope this meet what you are looking for.

  • Profile Image
    countrystate
    Answered on September 26, 2017 at 05:02 AM

    Thank you that worked, last quick question, is there any easy way to make a column wider like make the product column wider than others OR make it in a way to "autofit" the width ?

  • Profile Image
    amy
    Answered on September 26, 2017 at 09:06 AM

    I need more time to investigate this. I will be back soon. Thank you for your patient.

  • Profile Image
    amy
    Answered on September 26, 2017 at 09:44 AM

    Unfortunately, we cannot set it as auto-size for it as the texts are embedded in the input tag. You can manually do it. At first, you need to expand the width of the table. Please click on the form designer button and then paste this CSS code:

    #customFieldFrame_17.custom-field-frame.custom-field-frame-rendered.frame-ready {

        width : 100% !important;

    }

    Then please add these CSS codes to the Spreadsheet widget Custom CSS:

    td.A {

         width: 23%;

    }

    td.B {

         width: 20%;

    }

     

    td.C {

         width: 40%;

    }

     

    td.E {

         width: 100%;

     

    }

    The result is here:

  • Profile Image
    countrystate
    Answered on September 29, 2017 at 12:08 AM

    Hi Amy,

    you are legend, it worked.