How to make check boxes bigger?

  • imoade
    Asked on October 11, 2016 at 3:00 PM
    Also is there a way to manipulate the check boxes, make them bigger? etc glow 
  • Kevin Support Team Lead
    Replied on October 11, 2016 at 3:37 PM

    I can see the sample form that was provided on the other thread, here is the link: https://form.jotform.com/62832768455972 

    Please do note that the fields displayed in the table are not check boxes, they are radio buttons that are  being displayed as check boxes; however, you may increase their size by following the steps below. 

    To make the radio buttons bigger you may inject this CSS code: 

    input[type="radio"] {

        width: 20px;

        height: 20px;

    }

    If you would like to increase the check box size as well (like the field displayed at the very bottom of your form) then you only need this code: 

    input[type="checkbox"] {

        width: 20px;

        height: 20px;

    }

    This way you will increase the radio buttons (with check box layout) size, here is how the result should be:

    How to make check boxes bigger?  Image 1 Screenshot 30

    However, as you can see on the screenshot above the check boxes options overlap the check box at the very bottom of the form, this is why you will need to increase the check boxes container to properly display the table and the check box below it, this code will help with that: 

    li#id_7 {

        height: 235px;

    }

    This way you will have your form properly displayed and the radio buttons sizes increased:

    How to make check boxes bigger?  Image 2 Screenshot 41

    This guide will help to inject the CSS code: How-to-Inject-Custom-CSS-Codes

    If you have any question, please let us know. 

  • imoade
    Replied on November 1, 2017 at 7:43 PM
    Hi!
    Can you put this table into my Business Registration Form in my Favorites
    2016-10-11 21:37 GMT+02:00 JotForm :
    ...
  • Kevin Support Team Lead
    Replied on November 1, 2017 at 9:26 PM

    Do you want to add the table from this form https://form.jotform.com/62832768455972 to your form https://form.jotform.com/62832768455972

    I have been testing and it's possible to do so, we will need to have the following information in order to add it: 

    1. The first main header. 

    2. Both column headers. 

    3. The table content. 

    4. The bottom field. 

    Please provide us such information, we will add it to a cloned form of yours and provide you the link so you can clone it. 


  • imoade
    Replied on November 5, 2017 at 3:43 PM
    Did you even read my question, you are a complete disaster, the form was
    already replicated by Mike_G
    You are aggravating me strongly
    I want this table https://form.jotform.com/62832768455972 integrated into
    my form
    2017-11-02 2:26 GMT+01:00 JotForm :
    ...
  • Mike_G JotForm Support
    Replied on November 5, 2017 at 5:05 PM

    We are sorry if you feel that way. We always tend to clarify our user's concern first especially if we find it confusing so that we will be able to provide the most appropriate solution.

    Moving on to your concern, from what I understand, you want the fields of the form I created for you as an example on another thread added to your new another form — Business Registration Form, is that correct?

    On a clone version of your Business Registration Form, I see that you already added the fields to your form.

    1509918421t16 45 32 Screenshot 10

    To make it look like the same as the form I have created for you as an example, please add the following CSS codes to your form — How-to-Inject-Custom-CSS-Codes

    #id_57 span.form-radio-item {

        width: 335px !important;

        padding: 15px 8.5px !important;

        border: 1px solid black !important;

        margin-bottom: 0px !important;

    }

    label#label_57 {

        display:none !important;

    }

    li#id_55 {

        width: 390px !important;

        padding-top: 0px !important;

        padding-bottom: 0px !important;

        padding-right: 0px !important;

        margin-top: 0px !important;

        margin-bottom: 0px !important;

    }

    li#id_56 {

        width: 390px !important;

        padding-top: 0px !important;

        padding-bottom: 0px !important;

        padding-left: 0px !important;

        margin-top: 0px !important;

        margin-bottom: 0px !important;

    }

    #text_55, #text_56 {

        border: 1px solid black !important;

    }

    li#id_57 {

        padding-top: 0px !important;

        margin-top: 0px !important;

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

    }

    input[type="radio"] {

        -webkit-appearance: checkbox; /* Chrome, Safari, Opera */

        -moz-appearance: checkbox;    /* Firefox */

        -ms-appearance: checkbox;     /* not currently supported */

    }

    label#label_60 {

        display: none !important;

    }

    #cid_60 .form-single-column {

        border: 1px solid black !important;

        width: 689px;

        padding: 15px 8.5px 15px 8.5px !important;

    }

    div#cid_57 {

        height: 198px !important;

    }

    li#id_57 {

        height: 220px;

    }

    li#id_60 {

        padding-top: 0px !important;

        margin-top: 0px !important;

    }

    div#text_54 {

        border: 1px solid black !important;

    }

    li#id_54 {

        margin-bottom: 0px;

        padding-bottom: 0px;

    }

    div#text_54, #cid_60 .form-single-column {

        background-color: #DEEAF6 !important;

    }

    Another thing that you need to consider is the form width — The-Importance-of-Form-Widths

    And I would suggest you increase/set the Form Width of your form to 780px.

    1509918952t16 54 31 Screenshot 21

    Here's a clone version of your form where I have applied the changes above — https://form.jotform.com/73086517007960

    Feel free to clone the form to your account so you can inspect it better — How-to-Clone-an-Existing-Form-from-a-URL

     

    If you have other questions or concerns, please feel free to contact us again anytime.

  • imoade
    Replied on November 6, 2017 at 1:43 AM
    Mike Genius you are the best!!
    It was nor directed at u, I just misunderstood Kenny
    I’m so happy to see you are here, THANK YOU
    søn. 5. nov. 2017 kl. 23:05 skrev JotForm :
    ...