How can we create fields of same width?

  • deanharris
    Asked on February 18, 2016 at 1:46 PM

    1. How can I make the boxes wider? I need to have 3 boxes across that are all the same size.

    2. How do I test the form?  I want to see how I will receive the data.

    3. Is there spell check when setting up document?

     

    Thank you

     

  • Ben
    Replied on February 18, 2016 at 4:42 PM

    Since we can assist with only one question / issue per thread, I have moved your other two questions to new threads here:

    http://www.jotform.com/answers/775877 - for the question on testing the form

    http://www.jotform.com/answers/775878 - for the spell check question

    In regards to your current question on setting up the fields to have the same width, it would be best to let us know what is the form and the fields on the same that you are having issues with.

    Since you currently have 1 form: http://www.jotform.us/form/60475245989167 I believe that it is the same one that you had the issue with.

    Now since there are 2 sets of fields with 3 fields in the same row, I presume that one of them, or all are those that give you trouble, so lets see what we can do about that :)

    To change all Full Name fields to be of same size, you can do that by applying this CSS to your form:

    [data-type="control_fullname"] input {
        width: 92px;
    }

    It will set them up so that they are starting and ending together with the Address fields (so that they are not wider than the same). It will also be applied to all Full Name fields on your form.

    Now the other are date fields, so I presume that they are not the ones that you were thinking on, but the code to make them of same size would be this:

    [data-type="control_datetime"] input {
        width: 50px;
    }

    This will make them of the same width, while not looking too wide

    If you wish to apply the change to both fields, you can simply copy paste the following code:

    [data-type="control_fullname"] input {
        width: 92px;
    }
    [data-type="control_datetime"] input {
        width: 50px;
    }

    Into your forms custom CSS field: Inject Custom CSS Codes

    The only important thing would be to add the CSS rule after all the other CSS code in the same field (under all the other text).

    Now for doing similar by yourself, it is best to check out the following guide:

    Video Course: Form Designer Basics

    It will show you some of the basics of the Form Designer that would allow you to make changes to your form within the same with ease.

    We will be replying to your other questions soon, but if you have any issues applying CSS or something else in regards to this, do feel free to let us know about it here and we would be happy to assist. :)