Setting up the width of all fields to match on jotform

  • askmeabout
    Asked on September 21, 2014 at 12:26 PM

    #2. I want to set up my fields with the equal width but I can't find the width parametrs in some fields - look at these 2 screenshots  - first of the dropdown field id=#input_7, the second of the emaol field id=#input_6:

     

    Setting up the width of all fields to match on jotform Image 1 Screenshot 30

     

    and here:

     

    Setting up the width of all fields to match on jotform Image 2 Screenshot 41

     

  • Ben
    Replied on September 21, 2014 at 2:39 PM

    Hi,

    Yes the email field has the number of characters that they accept and does not show the width.

    I would suggest using our toolbar as it usually provides the quick access to such tools (even if they are not shown in the properties).

    Setting up the width of all fields to match on jotform Image 1 Screenshot 20

    I have changed the width of your jotform fields to match one another using toolbar as mentioned above, but as you will see if you try to do it yourself, some fields like the phone field do not offer setting the width, so if you want them to be as wide as others, you can apply some CSS magic to them.

    In case of your jotform this CSS would do what is needed:

    .mask-phone-number.form-textbox
    {
        width:385px;
    }

    Now, if I wanted to make them all align nicely, I would make that text box at the bottom the same width, but would like to allow users to increase its vertical value..so I would add this CSS code to it as well:

    .form-textarea
    {
        resize: vertical;
        width: 385px;
    }

    Now I would like to get that submit button to join the party so I would add this code as well:

    .form-submit-button
    {
        width: 395px;
    }

    In the end it will look like this (you can clone it to your account and have it all set): http://form.jotformpro.com/form/42635227815961

    If you prefer to add things by yourself you can grab the sections of interest above, or copy the entire CSS here:
    .mask-phone-number.form-textbox
    {
        width:385px;
    }
    .form-textarea
    {
        resize: vertical;
        width: 385px;
    }
    .form-submit-button
    {
        width: 395px;
    }

    What now? Inject the CSS to your form and set the other sizes using the toolbar (as shown above). To see how you can inject the CSS you can follow these steps: Inject Custom CSS Codes

    Do let us know if that helped you and if you have any further questions.

    Best Regards,
    Ben