-
QCECDataCollectionsAsked on October 31, 2017 at 4:11 AM
Hello JotForm Support,
Can you please kindly shed some lights on how I can hide the headings (A, B, C for columns and 1, 2, 3 for rows) and change the width of the first columns of a Spreadsheet Widget via CSS?
Thank you very much in advance.
Regards,
QCEC
-
Elton Support Team LeadReplied on October 31, 2017 at 6:02 AM
Use this CSS code and paste it in the spreadsheet widget settings under Custom CSS tab.
#col_A, #col_B, #col_C, #row_1, #row_2, #row_3 {
visibility: hidden;
border-top: 1px solid #fff !important;
border-bottom: 1px solid #333333 !important;
}
Result:
Append this if you want to change the first column width.
td.A {
width: 200px;
}
-
QCECDataCollectionsReplied on October 31, 2017 at 6:30 PM
Hello Elton,
Thank you very much for the quick reply, both the speed and the solution are impressively awesome. However, hope I'm not asking too much for the css code to hide the left upper corner (where there is no row/column indicator), or, to be more specific and hopefully makes it easier, can we just hide the all the rows and columns all together?
Sorry for not clarifying this in the first place.
Regards,
QCEC
-
liyamReplied on October 31, 2017 at 11:09 PM
No worries, QCEC. We are more than happy to help anytime!
With regarding your concern, if what you want is that the top and left headers to hide, simply use this CSS code instead:
th { display: none; }
Feel free to let us know if you have additional questions. :)
-
QCECDataCollectionsReplied on October 31, 2017 at 11:43 PM
Thank you Liyam,
The code works like a treat. You guys are superb, keep up the good work. :)
Regards,
QCEC
-
liyamReplied on November 1, 2017 at 12:47 AM
You are very much welcome, QCEC. And thank you also for the kind remark.
Feel free to get back to us anytime should you have questions or concerns.
All the best,
Liyam -
rehmanReplied on November 1, 2017 at 12:55 AMHi sir,.
I need post here https://www.jotform.com
So please send me your post price
Waiting your reply.
Thanks
-
liyamReplied on November 1, 2017 at 2:45 AM
I have moved your question on to a new thread, rehman. We will handle your concern in a while.
Thanks.
-
QCECDataCollectionsReplied on January 24, 2018 at 7:22 PM
Hello JotForm Support,
With my hopeless skill doing CSS, I'm failing to format a newly created spreadsheet widget I added to a form so I hope there is some quick assistance I can get to point out why it is not doing what I am after...
With the following code added, I was hoping the table will have the content of all the table columns aligned to the left and the font in the first row bold but as you can tell, none is happening and hence I'm here...
td {
text-align: left;
}
tr.1 {
font-weight:bold;
}
Can you please kindly shed some light on how I can achieve that?
Thank you very much in advance.
Regards,
QCEC -
liyamReplied on January 24, 2018 at 11:35 PM
Hello QCEC,
You can use this CSS code instead:
/* to left align the text content */
input { text-align: left; }/* first row bold */
.r1 input {
font-weight: bold !important;
}Feel free to let us know if you have additional questions. :)
-
QCECDataCollectionsReplied on January 25, 2018 at 1:15 AM
Thank you Liyam, you have once again swing the magic wand to make my wish come true.
Thanks heaps.
Regards,
QCEC