Hide columns on spreadsheet widget using CSS

  • Profile Image
    QCECDataCollections
    Asked on October 31, 2017 at 04: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

  • Profile Image
    EltonCris
    Answered on October 31, 2017 at 06: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;

    }

  • Profile Image
    QCECDataCollections
    Answered on October 31, 2017 at 06: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

  • Profile Image
    liyam
    Answered 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. :)

  • Profile Image
    QCECDataCollections
    Answered 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

  • Profile Image
    liyam
    Answered on November 01, 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

  • Profile Image
    rehman 
    Answered on November 01, 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

    .
  • Profile Image
    liyam
    Answered on November 01, 2017 at 02:45 AM

    I have moved your question on to a new thread, rehman. We will handle your concern in a while.

    Thanks.

  • Profile Image
    QCECDataCollections
    Answered on January 24, 2018 at 07: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

  • Profile Image
    liyam
    Answered 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. :)

  • Profile Image
    QCECDataCollections
    Answered on January 25, 2018 at 01:15 AM

    Thank you Liyam, you have once again swing the magic wand to make my wish come true. 

    Thanks heaps.

    Regards,
    QCEC