How do we set up 3 address fields to stay in a single line?

  • Profile Image
    Aiden123
    Asked on January 21, 2016 at 05:37 PM

    I have previously built a page that required that City, Sate and Zip be on one line.

     

    However, now they need the State to be a drop-down, not a text box.

     

    Once I added the drop down state field, I can no longer get it onto one line.

     

    Here is an example of how the form was: http://start.harrison.edu/info/ 

     

    But now I need the State as drop down in this page (which is not allowing me to put the City State Zip on the same line: http://explore.harrison.edu/

     

    want this set up layout... but with the drop down state

     

    with the drop down added, it looks like this...

    Please help.

    Thanks!

  • Profile Image
    jonathan
    Answered on January 22, 2016 at 12:57 AM

    Please try adding this CSS codes on your jotform http://www.jotformpro.com/form/60136055369960

     

    #id_37 {

        float:right;

        margin-right:70px;

        margin-top:-50px !important;   

    }

     

    it works on my test form so far https://form.jotform.com/60210343699959

    Let us know if this did not work for you.

    Thanks.

     

     

  • Profile Image
    Aiden123
    Answered on January 22, 2016 at 01:59 PM

    I added the CSS - it looks correct in the preview mode... but overlaps in my actual page:

    http://explore.harrison.edu/

    So, it looks like we you are taking me in the correct direction, but I may need to adjust the drop down widths (however you do that)?

    Any other thoughts?

    Thanks!

  • Profile Image
    Ben
    Answered on January 22, 2016 at 03:25 PM

    To rectify this, please do remove the code given by my colleague:

    #id_37 {
        float:right;
        margin-right:70px;
        margin-top:-50px !important;  
    }

    His code is correct, but it would not go together with the code that I would suggest:

    li#id_36, li#id_50, li#id_37 {
        width: 33%;
    }
    li#id_36 .form-error-message, li#id_50 .form-error-message, li#id_37 .form-error-message {
        white-space: pre-line;
        width: 70px;
    }
    #input_50 {
        min-width: 50px;
    }

    This code will align the 3 fields perfectly on the same line, increase the width of dropdown and in the same time make sure that the errors are properly shown and not cut out or cause fields to change their position.

    I have taken a quick screencap of how it should look for you:

    You can see how to add the code to your form by following the steps here: Inject Custom CSS Codes

    Please do only remember to remove the ones mentioned above first.

    Do let us know how it goes :)