Alignment of form fields

  • Profile Image
    SeaPyp
    Asked on November 07, 2014 at 04:00 AM

    Hi

    http://www.jotform.com//?formID=43085941152150

     

    I have two issues on my form:

    1)  The radio buttons at the top should be centered (I toggled that in the properties menu) and its not.

    2)  As you progress down the form, my fields become narrower.  I want to have the bottom 6 fields in two columns of 3 next to one another.  No matter how big I make the fields however, they still stay the same size.  I also want to put more space between "Desired Aircraft" and "Notes".  Pretty much the same issue as above.

     

    I have set my form wider than normal (850px) but that is because I want the airport pickers next to one another.  

     

    Can anyone help me please?

     

    Sean

  • Profile Image
    ashwin_d
    Answered on November 07, 2014 at 06:27 AM

    Hello Sean,

    Please take a look at the following cloned form and see if this is what you wanted to achieve:  http://form.jotformpro.com/form/43102838776965? 

    Feel free to clone this form for a closer look. The following guide should help you in form cloning: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Hope this helps.

    Do get back to us if you want some other changes as well.

    Thank you!

  • Profile Image
    Ben
    Answered on November 07, 2014 at 05:08 PM

    Hi,

    I presume that you would like to do something like this?

    http://form.jotformpro.com/form/43106661814956

    If you do, you can clone it to your account: How to Clone an Existing Form from a URL

    or inject this CSS to your jotform:


    li.form-line.form-line-column[data-type="control_textbox"] {
        max-width: 400px;
        width: 400px;
    }

    li.form-line.form-line-column[data-type="control_textbox"] > .form-input-wide, li.form-line.form-line-column[data-type="control_textbox"] > .form-input-wide > input {
        max-width: 100%;
        width: 100%;
    }

    You can do that following this guide: How to inject Custom CSS Codes.

    You will also need to shrink the fields and make every third fall in a new line.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image
    Kiran
    Answered on November 07, 2014 at 06:26 PM

    Please check the following JotForm to see the changes as you need with.

    http://www.jotformpro.com/form/43106739469968 

    This width can be changed from the form designer to adjust as per your requirement.

    You may clone this form to your account to make any additional changes. Let us know if you have any questions in this regard. We will be happy to help.

    Thank you!!

  • Profile Image
    Kiran
    Answered on November 07, 2014 at 07:35 PM

    We are glad that the solution provided by us worked for you. It's our pleasure to assist you.

    Please get back to us if you have any other questions. We will be happy to help you.

    Thank you for using JotForm.