How to make a checkbox button bigger in Input Table

  • Techloq_Windows_Form
    Asked on September 12, 2019 at 2:06 PM

    Is it possible to make only one coloumns checkboxes bigger the size?

    1568311584jf22 Screenshot 10

  • Richie JotForm Support
    Replied on September 12, 2019 at 3:33 PM

    Can you please share the form in question?

    We can use custom CSS to change the size of the checkbox in your input table.

    Looking forward for your response.

  • Techloq_Windows_Form
    Replied on September 15, 2019 at 2:37 PM

    Hi,


    Is there a possibility of doing this?

  • Victoria_K
    Replied on September 15, 2019 at 3:01 PM

    Hi! Would you like to have something like this as result? 

    How to make a checkbox button bigger in Input Table Image 1 Screenshot 20

    If yes, please try adding this CSS code to your form:

    #cid_324 > table > tbody > tr > td:nth-child(2) {

      zoom: 1.7;

      margin: auto !important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 9:20 AM

    Thank you,

    This worked but is it possible that the box shouldn't become bigger just the checkbox?

  • Victoria_K
    Replied on September 19, 2019 at 9:40 AM

    Please try using this code instead:

    #cid_324 > table > tbody > tr > td:nth-child(2) > input {

      zoom: 1.7;

      margin: auto !important;

    }

    #cid_324 > table > tbody > tr > td {

     padding: 0;

    }

    How to make a checkbox button bigger in Input Table Image 1 Screenshot 20

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 9:54 AM

    Thank you Victoria!

    On the image you attached it looks like exactly what i wanted however when entering the above CSS code it didn't change anythig on my form

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 9:57 AM

    Oh im sorry, i just saw in publish mode that it does work.

    I first checked in Build mode where the changes didn't show any effect 


    Thank you very much

  • Victoria_K
    Replied on September 19, 2019 at 9:58 AM

    You are right, the changes take effect on form direct link, in build mode there're different CSS selectors. 

    If you need any other help, please let us know. 

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 10:27 AM

    Thanks.

    I just tried to do this by all my other input tables but didn't work.

    I copied the CSS above and changed from #cid_324 to 364 but 364 didn't change


    Please advise

  • Victoria_K
    Replied on September 19, 2019 at 10:52 AM

    Apologies, I can not find field with id containing 364. Can you please tell us what is field's label on form so we checked closer? 

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 11:18 AM

    The secont table by 'Low' is 364

    1568906294jf45 Screenshot 10

  • Techloq_Windows_Form
    Replied on September 19, 2019 at 2:05 PM

    Hi,

    any update on this?

  • Victoria_K
    Replied on September 19, 2019 at 2:11 PM

    Hello,

    I think it is working now on your form. Can you please check again?

    How to make a checkbox button bigger in Input Table Image 1 Screenshot 20