Hide columns on spreadsheet widget using CSS

  • QCECDataCollections
    Asked 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 Lead
    Replied 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:

    Hide columns on spreadsheet widget using CSS Image 1 Screenshot 30

    Append this if you want to change the first column width.

    td.A {

        width: 200px;

    }

    Hide columns on spreadsheet widget using CSS Image 2 Screenshot 41

  • QCECDataCollections
    Replied 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

  • liyam
    Replied 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. :)

  • QCECDataCollections
    Replied 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

  • liyam
    Replied 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

  • rehman
    Replied on November 1, 2017 at 12:55 AM

    Hi sir,

    I need post here https://www.jotform.com

    So please send me your post price

    Waiting your reply.

    Thanks

    .
  • liyam
    Replied 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.

  • QCECDataCollections
    Replied 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

  • liyam
    Replied 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. :)

  • QCECDataCollections
    Replied 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