How Does one Expand the Cells of Address Fields (Quick Tool)?

  • Profile Image
    brodtex
    Asked on April 04, 2012 at 08:23 AM

    Hello,

    How to expand the cells of "quick tool" "address"?
    Is it possible to delete "state / region" and "Country"?
    Thank you!

  • Profile Image
    abajan
    Answered on April 04, 2012 at 11:43 AM

    To address your second question first, the following injected CSS will hide the State / Province and Country elements of all postal address fields in a form:

    .form-address-state,
    #sublabel_state,
    .form-address-country,
    #sublabel_country {
    display: none;
    }

    The form pictured below shows the result of injecting the above CSS:

    (Click image to view live form)

    Strictly speaking, #sublabel_state and #sublabel_country should each affect just a single state sub label and country sub label respectively because while classes can be assigned to multiple elements, IDs are unique and should each be assigned to only one element (see Differences Between IDs and Classes). This error in the form builder needs to be rectified and as such, I will notify our developers about it.

    If you don't want the State / Province and Country elements displayed in email alerts, please see How to Strip Headers From Postal Addresses in Email Alerts in the Form Emails section of our user guide.

    As to your first question, expansion (increasing the width) of text boxes in postal address fields can also be accomplished via injected CSS. To illustrate, clone the above form, add the following rule to the CSS already injected and save the form:

    #input_5_addr_line1,
    #input_5_addr_line2 {
    width: 400px;
    }

    You will notice that the first and second lines of the first address field have become wider. To apply the same width to the same elements in the other address fields in the form, change the rule as follows:

    #input_5_addr_line1,
    #input_5_addr_line2,
    #input_6_addr_line1,
    #input_6_addr_line2,
    #input_7_addr_line1,
    #input_7_addr_line2 {
    width: 400px;
    }

    Firebug can be used to quickly determine how selectors should be configured. (Tip: If the ID of the address field is id_5, the first number in all of the IDs of elements in that field will be 5.)

    Hopefully, this information was helpful. If you need further assistance with this or any other aspect of your form(s), do let us know.

  • Profile Image
    brodtex
    Answered on April 05, 2012 at 04:04 AM

    Thank you for your help.

    One last thing, how to place the "post code" before "city", on the same line?


    BR

  • Profile Image
    gori-mathew
    Answered on April 05, 2012 at 04:13 AM

    Hello,

    Thanks for your question.

    You can combine the 'city field' and 'post code' on same line by firstly shrinking fields, then use 'move to new line' or 'merge to above line' features. Please check the guide link below for clear steps.

    http://www.jotform.com/help/90-How-to-Position-Form-Fields-on-the-Same-Line

    Please lets know if you need further assistance, thanks for using Jotfrom!

  • Profile Image
    brodtex
    Answered on April 05, 2012 at 04:34 AM

    This method works effectively for independent cells.
    But I use "quick tool" "address" with the "zip code" and "city"

     

    Thank you

  • Profile Image
    abajan
    Answered on April 05, 2012 at 04:56 AM

    @brodtex

    Since all of a postal address's sub fields are contained within a table, you would either have to inject CSS that absolutely positions both the Postal / Zip Code and City elements (if you had wanted the zip code to come after the city, you would only need to reposition the zip code since the city would already be correctly placed) or embed the form's full source into a web page and edit the HTML to reposition the fields to your liking.

    I should be able to come up with an injected CSS solution later. In the interim, perhaps my colleagues may provide a solution or two.