U.S. State Picker Widget - Align with Address Field

  • dlasson
    Asked on September 16, 2015 at 3:06 PM

    Hi.

    Is there any way to move/align the "State" widget field next to the "City" field?

    Also, can I insert a subtext to the "State" field that is the same font as the subtexts in the other address fields?

    Thanks! 

  • Welvin Support Team Lead
    Replied on September 16, 2015 at 4:41 PM

    Yes, that is possible with custom CSS codes. Here's a cloned version of your form showing the changes:

    http://www.jotformpro.com/form/52585997352976

    I did the following tricks to accomplish what you want:

    a. Inject the following custom CSS codes to the form to move up/left the widget:

    li#id_462 {

    margin-top: -148px;

    margin-left: 165px;

    margin-bottom: 54px;

    }

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

    b. Enable the State field in the address field. This is to utilize the sub-label - for it to appear below the widget.

    c. Hide the label in the widget:

    U Screenshot 20

    You can simply clone my form back: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    Thanks

  • dlasson
    Replied on September 25, 2015 at 11:15 AM

    Thanks. I cannot seem to do the same (align) with the following fields (in the "Employment History" section). I only need city and state fields here.

    thanks.

    U Screenshot 20

     

  • Welvin Support Team Lead
    Replied on September 25, 2015 at 12:29 PM

    I've fixed it for you. You just need to shrink both city and the widget then move the widget down so it will be placed after the city box.

    http://www.jotform.com/help/90-Form-Field-Positioning

    Thanks