Is there a way that zip code can be moved next to state?

  • Profile Image
    nomadicloom
    Asked on June 17, 2016 at 10:37 AM
    I had one other question. Is there a way that  zip code can be moved next to state? I am using the address field template. Or would I have to build out each line?
  • Profile Image
    Welvin
    Answered on June 17, 2016 at 11:12 AM

    Inject the following custom CSS codes to your form:

    [data-type="control_address"] table tbody tr+tr+tr {

       width: 50% !important;

       display: inline-block;

    }

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 11:18 AM

    That work, but is there a way to shift it to the left.

     

  • Profile Image
    Welvin
    Answered on June 17, 2016 at 11:23 AM

    Change the width from 50% to 34%. Change the value if needed to make it closer.

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 11:35 AM

    That moved it but when you try to get it closer, it pushes city and state too close. Is there a padding adjustment maybe? I am trying to get the three equally spaced if possible. Thanks for the help. You guys have such great support!

  • Profile Image
    Welvin
    Answered on June 17, 2016 at 12:04 PM

    You need to remove the following custom CSS codes;

    #input_4_postal

    #input_4_state

     

    The result will be like this:

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 12:09 PM

    When I do that there is no space between state and zip

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 12:25 PM

    Here is what happens when you shrink the form. It does not hold the spacing. I am trying to keep the three equal. 

     

  • Profile Image
    Nik_C
    Answered on June 17, 2016 at 01:55 PM

    I checked your form and the layout for the city, state and zip code are different than what you have provided on the  screenshot. Have you solved the problem or you still want the layout to be similar to the image you have provided.

    We'll wait for your response.

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 02:18 PM

    I would still like it to be like the screen shot. I removed the css suggested until further input.

  • Profile Image
    BJoanna
    Answered on June 17, 2016 at 03:06 PM

    Please try to remove custom CSS codes, that my colleague suggested:

    #input_4_postal

    #input_4_state

    And add this CSS code to your form:

    [data-type="control_address"] table tbody tr+tr+tr {

       width: 39% !important;

       display: inline-block;

    }

    input#input_4_postal {

        margin-left: 5px!important;

    }

    After that you form should look like this.

    Here is my demo form: https://form.jotform.com/61685923816971 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    nomadicloom
    Answered on June 17, 2016 at 03:37 PM

    That work! Thank you.