How can i resize Ratio?

  • Profile Image
    xe7en
    Asked on January 10, 2017 at 10:48 AM

    Hi there,

     

    it is possible to resize the Ratio icon to the size like this?

     

     

    Thanks for help. 

    Chor

  • Profile Image
    BJoanna
    Answered on January 10, 2017 at 12:28 PM

    You can change the template of your radio buttons and check boxes inside of Form Designer. Inside of Form Designer simply click on any radio button option and change template. 

    Once you change the radio button template you will also be able to customize your radio buttons with CSS. 

    On my demo I have changed radio button template and added this CSS code:

    .form-radio-item:not(#foo) label:before {

        border-radius: 5px;

        width: 120px;

        height: 25px;

    }

    How to Inject Custom CSS Codes

     

    Here is my demo form: https://form.jotform.com/70094887761973 

    Feel free to test it and clone it

    You can also check this widgets:

    Line Radio Buttons

    Image Radio Buttons

    How to Add a Widget to your Form?

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    xe7en
    Answered on January 11, 2017 at 03:15 AM

    Thank You so much! Your Form works fine for me. 

    I just have one wish, it is possible to fill the ratio with a color and change the selected option font color to white instead of the "blue ratio point"? Like this:

  • Profile Image
    BJoanna
    Answered on January 11, 2017 at 06:37 AM

    Please allow me some time to find the correct CSS code.

  • Profile Image
    BJoanna
    Answered on January 11, 2017 at 06:47 AM

    Please add this CSS code to your form as well:

    input[type=radio]:checked + label {

        color : #fff;

        font-style : normal;

        background-color: #006ab3;

        width:120px;

        border-radius: 5px;

        text-indent: -15px!important;

    }

    .form-radio-item:not(#foo) label:before {

        left: 0px!important;

    }

     

    How to Inject Custom CSS Codes

     

    Here is my new form: https://form.jotform.com/70103074941952 

    Feel free to test it and clone it.

     

    Let us know if you need further assistance.

  • Profile Image
    xe7en
    Answered on January 12, 2017 at 04:12 AM

    Hi Joanna,

    again many thanks to you and your support!

    Sorry for another questions, i never work with css before, so it is very difficult for me.

     

    Can you please tell me how to solve the following problems:

     

     

    1. Fill the Checkbox with #006ab3

    2. Center "Anrede"

    3. Center "Frau" ("Frau" has the same size as "Absenden")

    4. Middle the Text in the box and Center - also for "Herr"

     

    Thank you! 

  • Profile Image
    BJoanna
    Answered on January 12, 2017 at 05:47 AM

    1. Add this CSS code:

    .form-checkbox-item:not(#foo) label:after {

        background-color : #006ab3;

        box-shadow : 0 5px 0 0 #006ab3, 5px 5px 0 0 #006ab3, 10px 5px 0 0 #006ab3, 13px 5px 0 0 #006ab3, 10px 8px 0 0 none, 15px 2px 0 0 none;

        -moz-transform : none!important;

        -webkit-transform : none!important;

        -o-transform : none!important;

        -ms-transform : none!important;

        transform : none!important;

    }

    .form-checkbox-item:not(#foo) label:after {

        content : '';

        position : absolute;

        z-index : 10;

        display : inline-block;

        opacity : 0;

        top : 2px!important;

        left : 6px!important;

        width : 20px!important;

        height : 20px!important;

    }

    I will need a bit more time, because you already have lot of custom CSS inside of the form and I will need to inspect that as well. 

  • Profile Image
    BJoanna
    Answered on January 12, 2017 at 06:07 AM

    This is the closest I can get to screenshot you provided.

    I have added some additional CSS code and I had to edit some existing CSS code.

    Here is my demo form: https://form.jotform.com/70111930281949 

    Please clone it to your account. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    xe7en
    Answered on January 13, 2017 at 08:26 AM

    Thank you so much, it works fine. 

     

  • Profile Image
    xe7en
    Answered on January 20, 2017 at 07:31 AM

    Hi Joanna,

     

    i'm again, i hope this is my last wish to you. could you please delete the Border or "shadow" on the form?

     

    see below:

     

  • Profile Image
    Kevin_G
    Answered on January 20, 2017 at 08:45 AM

    I have checked your form and it does not have border anymore, to remove the box shadow effect, please inject this CSS code: 

    .form-all {

        box-shadow: none !important;

    }

    This should be the result: 

    Hope this helps.