Text Field: How To Put Several Text Field In One Row

  • Profile Image
    alvincosio
    Asked on July 23, 2013 at 06:57 PM

    i want the 9 textbox (see attached pic) equally align with the textbox above. 

     

    Thanks,

    Alvin

  • Profile Image
    jefreylandicho
    Answered on July 23, 2013 at 08:18 PM

    You can achieve this result by increase your form width, decreasing and shrinking the text field width and by injecting the custom css. The CSS code you need to inject in your form style is found  below.

    .form-line.form-line-column { padding: 10px; } 

    Note: you can change the 10px value based on the preferences you would like the space between field appear.

    To increase your form width, select the Form Styles tab and click the Form Width Icon.

    To decrease the field width, select the properties tab and click the Size Icon and to shrink the field, click the Gear Icon and select Shrink.

    To Inject a Custom CSS in your form, please refer to this guide.

    The result would give similar to the form below.

    http://form.jotform.co/form/32026215327848?

    If you need further assistance, please contact us again.

  • Profile Image
    alvincosio
    Answered on July 23, 2013 at 11:08 PM

    no sir, i mean not in the same row. if you will notice on my forms

    http://www.southernindustrialandtruck.ca/forms/4577422856 

     1. i have 3 textfield in one row

    2. i have 4 row

    i want my textfield reduced spaces between their rows. 

    something like this (sorry i am replying on ipad only)

    for example the line is the box, i want the spacing something like this

    _________       ___________        ___________    

    _________       ___________        ___________

    _________       ___________        ___________

    _________       ___________        ___________

     

    i hope you get me

    thanks

  • Profile Image
    EltonCris
    Answered on July 24, 2013 at 02:45 AM

    Hi,

    Inject the following CSS codes to your form.

    #id_23, 

    #id_24, 

    #id_25, 

    #id_33, 

    #id_34, 

    #id_35, 

    #id_36,

    #id_40,

    #id_41,

    #id_42,

    #id_43,

    #id_44,

    #id_45{

    padding: 0 36px;

    }

    #label_34, 

    #label_35, 

    #label_36,

    #label_40,

    #label_41,

    #label_42,

    #label_43,

    #label_44,

    #label_45{

    display:none; 

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Result:

    You can also use our Matrix Tool to create text box columns. It's under Survey Tools. I think this would be a lot easier without the need of custom CSS injection.

    Thanks!

  • Profile Image
    alvincosio
    Answered on July 24, 2013 at 10:39 AM

    THANK YOU VERY MUCH. THAT THE WAY I WANT . :D :D

  • Profile Image
    EliezerN
    Answered on July 24, 2013 at 10:50 AM

    In behalf of my colleagues let me tell you it is a pleasure to assist you. Should you have any other question feel free to contact us.

    Thanks.