How to expand Address section fields

  • NACUMS_org
    Asked on April 8, 2016 at 5:46 PM
    Why can't the fields in the "Address" Quick Tool be expanded?
  • Mike_G JotForm Support
    Replied on April 8, 2016 at 7:45 PM

    To expand the width of the address field in your form,

    try adding the CSS code below.

    [data-type=control_address] .form-input, .form-address-table, .form-textbox{

    max-width: 300px !important;

    }

    Here's a guide to know How-to-Inject-Custom-CSS-Codes

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • NACUMS_org
    Replied on April 9, 2016 at 10:18 PM

    Thanks Mike_G.  This was very valuable.  I wish I under CSS to take full advantage of this control feature.

    Now I have two similar issues.  I have two text boxes (Title / School Name) where the boxes are just too short.  How do I expand them.  I also used the "Full Name" quick tool and neither of those boxes are long enough to see even mildly long First or Last names.  How do I make these all about 15 characters longer without expanding other text boxes?

  • Mike_G JotForm Support
    Replied on April 10, 2016 at 6:13 AM

    You're welcome! To achieve your second concern, below are the additional CSS codes that you need. 

    input#first_4.form-textbox, input#last_4.form-textbox, li#id_4 span.form-sub-label-container{

    width:160px !important;

    float: none !important;

    }

    li#id_4.form-line{

    width: 400px !important;

    }

    li#id_5.form-line, li#id_12.form-line{

    width: 290px !important;

    }

    input#input_5.form-textbox, input#input_12.form-textbox{

    width: 210px !important;

    }

  • NACUMS_org
    Replied on April 10, 2016 at 4:55 PM

    Your code worked again, perfectly.  I now added the "email" quick tool and tried to modify your previous code to also expand this field and I guess that I just have no talent.  Please, what is the secret into making the email field longer, also?

  • jonathan
    Replied on April 10, 2016 at 5:19 PM

    I assume this was your form http://www.jotformpro.com/form/60985015565966    you were working on.

    Try this CSS code

    #input_27{

        width: 250px !important;

    }

     

    How to expand Address section fields Image 1 Screenshot 20

     

    Just increase the 250px width according to your requirement.

    Let us know if you need further assistance.