Field Positioning

  • Profile Image
    ultraslimplus
    Asked on September 23, 2012 at 10:41 AM

    Hello,

      I am havin a bit of troubles now. Got pretty far but havin trouble fitting the Province and Country in. The form is getting quite small so displaying them underneith it may not be an option. I could try it though but dont know how to get the 2 fields to drop down.

    I was able to size most fields to fit but the email field eludes me.

    I also have a mysterious bit of code appearing at the top that I am yet to track down. Here is a screenshot:

    Spence

  • Profile Image
    moonzkie
    Answered on September 23, 2012 at 11:13 AM

    Hi,

    You are going to have to Inject Custom CSS to gain control over the size of these fields. 

    While in the form editor, Click Preferences -> Form Styles, then in the Inject Custom CSS

     

    #input_4_addr_line1 {width: 50px !important; }

    #input_4_addr_line2 {width: 50px !important; }

    #input_4_city {width: 50px !important; }

    #input_4_state {width: 50px !important; }

    #input_4_postal {width: 50px !important; }

    #input_4_country {width: 50px !important; } 

    Experiment with different values for width, e.g change one to 75px, until you are with how the fields look. The labels should be self explanatory.

    Please let us know if you are unsure about anything. Thanks.

  • Profile Image
    pinoytech
    Answered on September 23, 2012 at 12:12 PM

    @ultraslimplus

    I have clone your form and make some workaround on it. Can you please take a look at this cloned form.

    http://www.jotform.me/form/22664298467467

    This is the codes that I have injected in to this form:

    #input_4_addr_line1 {

    width: 225px !important;

    }

    #input_4_addr_line2 {

    width: 225px !important;

    }

    #input_4_city {

    width: 100px !important;

    }

    #input_4_state, #sublabel_state.form-sub-label {

    margin-left: -40px;

    width: 100px !important;

    }

    #input_4_postal {width: 50px !important;

    }

    #input_4_country, #sublabel_country.form-sub-label {

    margin-left: -40px;

    width: 100px !important;

    }

    If you need further assistance, feel free to contact us at anytime.

    Thank you!

  • Profile Image
    guest_22665002929050
    Answered on September 23, 2012 at 07:38 PM

    This was awesome information. I applied all that you said and the only problem now is the email field. I think that there is some previous CSS somewheres possibly causing grief.

    Spence

  • Profile Image
    jonathan
    Answered on September 23, 2012 at 08:14 PM

    @Spence

    Hi, in case you are still having issue, the email address field ID # is #input_3 

    You can resize it by using the CSS code

    #input_3 {

    width: 225px !important;

    }

    Change the ID field to that of  #input_3