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

  • 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

    Jotform Thread 1257588 Screenshot
  • BJoanna
    Replied on September 26, 2017 at 3: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.

  • BJoanna
    Replied on September 26, 2017 at 4: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;

    }

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

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

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

    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.

  • countrystate
    Replied on September 26, 2017 at 5: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 ?

  • amy
    Replied on September 26, 2017 at 9:06 AM

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

  • amy
    Replied on September 26, 2017 at 9: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;

    }

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

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

    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%;

     

    }

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

    The result is here:

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

  • countrystate
    Replied on September 29, 2017 at 12:08 AM

    Hi Amy,

    you are legend, it worked.