How to make check boxes bigger?

  • Profile Image
    imoade
    Asked on October 11, 2016 at 03:00 PM
    Also is there a way to manipulate the check boxes, make them bigger? etc glow 
  • Profile Image
    Kevin_G
    Answered on October 11, 2016 at 03: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:

    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:

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

    If you have any question, please let us know. 

  • Profile Image
    imoade
    Answered on November 01, 2017 at 07: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 :
    ...
  • Profile Image
    Kevin_G
    Answered on November 01, 2017 at 09: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. 


  • Profile Image
    imoade
    Answered on November 05, 2017 at 03: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 :
    ...
  • Profile Image
    Mike_G
    Answered on November 05, 2017 at 05: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.png

    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.png

    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.

  • Profile Image
    imoade
    Answered on November 06, 2017 at 01: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 :
    ...