-
countrystateAsked 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
Page URL: https://form.jotform.co/72611510186853 -
BJoannaReplied 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.
-
BJoannaReplied 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;
}
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.
-
countrystateReplied 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 ?
-
amyReplied 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.
-
amyReplied 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;
}
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:
-
countrystateReplied on September 29, 2017 at 12:08 AM
Hi Amy,
you are legend, it worked.