How do i position the radio buttons

  • Profile Image
    perrymanku
    Asked on August 21, 2013 at 05:50 AM

    Hi,

     

    I have this form http://form.jotformpro.com/form/32125042363947.

     

    I have added radio buttons to the form which you can vaguely see.  I need to position these to be under the red text (question) but am having difficulty doing it.  Please can you assist.

     

    Thanks

    PErry

  • Profile Image
    guilledutra
    Answered on August 21, 2013 at 10:36 AM

    Hi,

    could you try by Injecting this custom css to your form:

    #cid_9 {
    margin-left: 16% !important;
    margin-top: 6% !important;
    }

    please let us know if you need further assistance

    thanks

  • Profile Image
    perrymanku
    Answered on August 22, 2013 at 02:17 AM

    Hi,

     

    Thanks for your help.  I have added to form:

    http://form.jotformpro.com/form/32125042363947?

     

    However, the top select circle is missing for option one and I need to remove teh click here to edit text and also change the option 1/2/3 text and make it a required answer.  Can you please assist

  • Profile Image
    KadeJM
    Answered on August 22, 2013 at 10:20 AM

    Hello Perry, I've reconfigured this for a solution to correct the rest of your problems. So here's what you need to do to fix it all. Also here's an example clone of the form before doing so just to show what these 2 Corrections will fix on your form:

    Final Look of your Form with Fixes Applied:  http://form.jotform.us/form/32334366461149. You can clone it back if that would be easier for you though.

    (1) First, there is a problem with the radio button that is causing a glitch because of the css being used in conjuction with the rest of your custom css for your form and that is the reason it is causing the first button to dissappear. To fix this you will need to open up the Options for your Radio Buttons, hit Shift + Enter to move them to the next line and in the first line hit the Space Bar one time. This will shift it down and make the 3 Options and their associated Radio Buttons show. Now go back into the CSS that my colleague provided to shift them and change the values in his script on the 2 margin lines below (See (2) Below for Further Instruction) -

    Note: It will not look right until you make both of these 2 Changes otherwise it throws the whole thing off but after your done it will look right as shown in the clone example of the Final Form Look.

    Radio Options Fix Screenshot:

     

    (2) Now to finish it out and remove the " Edit Text..." and fix the rest of it modify the Original CSS Code my colleague provided then add an additional CSS Script I'm giving you below that on a new line in your CSS Injection Editor:

    Change the CSS Line From:

    #cid_9 {
    margin-left: 16% !important;
    margin-top: 6% !important;
    }

     

    To:

    #cid_9 {
    margin-left: 39% !important;
    margin-top: 3% !important;
    }

     

    Inject this additional CSS Script on a New Line below the other code:

    label#label_9.form-label-left {display: none; }

     

    If you run into any further issues just let us know so we can help you more. 


  • Profile Image
    perrymanku
    Answered on August 22, 2013 at 11:02 AM

    Hello,

     

    Thanks fo rthe resolve. However, I have now named the radio buttons how I wnat them but I need to make this a required field.  Also, the first drop down box and the tick box are not clickable, is this becasue something is over lapping them, if so how do I rectify this?

     

    http://form.jotformpro.com/form/32334824017953?

  • Profile Image
    EliezerN
    Answered on August 22, 2013 at 02:19 PM

    @perrymanku

    We will be more than glad to help you with your form. However, we would appreciate if you open a new thread first as your first request has been resolved. 

    Thanks for your comprehension.