Move "Other" to same line

  • Profile Image
    zubeida
    Asked on August 04, 2015 at 12:16 PM

    2)Is there a way to move the selection of 'others' (as seen in q5) to be in the same line as the other options (Malay, Chinese, Indian) as in the actual form, there is still some space in it. However, I also can't seem to adjust it too.

     

  • Profile Image
    Shadae
    Answered on August 04, 2015 at 01:12 PM

    Hi zubeida,

    The other option is automatically placed in another line with the radio buttons. To get it in the same line you would need to Inject Custom CSS.

    You can see a clone sample for with the changes made here: https://www.jotform.com/52154915642960 

    Please inject the following CSS code in your form:

    #input_207 {

        margin-left : 30px !important;

        margin-top : -50px !important;

    }

    #other_207 {

        margin-bottom : -24px !important;

    }

    #cid_207 span.form-radio-item:nth-child(5) {

        margin-top : -39px;

        margin-left : 550px !important;

    }

    #input_206 {

        margin-left : 30px !important;

        margin-top : -50px !important;

    }

    #other_206 {

        margin-bottom : -24px !important;

    }

    #cid_206 span.form-radio-item:nth-child(4) {

        margin-top : -35px;

        margin-left : 450px !important;

    }

    I hope this helps, please inform us if you need further assistance.

  • Profile Image
    zubeida
    Answered on August 04, 2015 at 07:38 PM

    Thank you Shadae! I also need some help with this part (section J, Question 7). i tried using the codes you gave me and altered it a little by changing the id, however, it didn't seem to work here. the codes I used are as below, please let me know where did I go wrong with this.

    Thanks!

    #input_113 {

     

        margin-left : 30px !important;

     

        margin-top : -50px !important;

     

    }

     

    #other_113 {

     

        margin-bottom : -24px !important;

     

    }

     

    #cid_113 span.form-radio-item:nth-child(5) {

     

        margin-top : -35px;

     

        margin-left : 450px !important;

     

    }

    Update: I figured I have to change form-radio-item to form-checkbox-item, however, the option others is now overlapping with the option "not applicable". How can I do it in a way where it doesn't overlap with the other options? Thanks!

     

  • Profile Image
    EltonCris
    Answered on August 04, 2015 at 11:34 PM

    Use this to correct that specific checkbox other input.

    input#input_113 {

        width: 100px;

    }

    #id_113 .form-checkbox-item {

        width: 130px;

            clear: none !Important;

    }

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

        margin-top: 0;

    }

    input#other_113{

        bottom: 4px;

        height: 17px;

        width: 16px;

    }

    Result:

    Hope this helps!

  • Profile Image
    zubeida
    Answered on August 05, 2015 at 12:25 AM

    Thanks, it works!