How to make the text box wider in the table?

  • MEM2017
    Asked on March 28, 2017 at 1:58 PM

    Hello,

    On our table in the registration form the text box is too narrow - how do I make them wider so it will show the person's first and last name?

     

    Thank you,

    Lori

  • John_Benson
    Replied on March 28, 2017 at 4:58 PM

    Hello Lori,

    Please give me more time to create you a custom CSS code to adjust the width of the text box of full name inside the table. I will message you again once I have done creating the custom CSS code.

    Thank you for you understanding.

  • John_Benson
    Replied on March 28, 2017 at 5:55 PM

    Thank you for your patience.

    I cloned your form and I was able to increase the width of the name field by adding a custom CSS code. Here's the custom CSS code:

    input#input_50_0_0 {

        width: 200px !important;}

    input#input_50_1_0 {

        width: 200px !important;}

    input#input_50_2_0 {

        width: 200px !important;}

    input#input_50_3_0 {

        width: 200px !important;}

    input#input_50_4_0 {

        width: 200px !important;}

    input#input_50_5_0 {

        width: 200px !important;}

    input#input_50_6_0 {

        width: 200px !important;}

    input#input_51_0_0 {

        width: 200px !important;}

    input#input_51_1_0 {

        width: 200px !important;}

    input#input_51_2_0 {

        width: 200px !important;}

    input#input_51_3_0 {

        width: 200px !important;}

    input#input_51_4_0 {

        width: 200px !important;}

    input#input_51_5_0 {

        width: 200px !important;}

    input#input_53_0_0 {

        width: 200px !important;}

    input#input_53_1_0 {

        width: 200px !important;}

    input#input_53_2_0 {

        width: 200px !important;}

    input#input_53_3_0 {

        width: 200px !important;}

    input#input_53_4_0 {

        width: 200px !important;}

    input#input_53_5_0 {

        width: 200px !important;}

    input#input_53_6_0 {

        width: 200px !important;}

    input#input_53_7_0 {

        width: 200px !important;}

    Follow this guide on: How-to-Inject-Custom-CSS-Codes

    Here's the clone form: https://form.jotformpro.com/70867083440963. If you want to clone it to see the custom CSS code inside, follow this guide: How-to-Clone-an-Existing-Form-from-a-URL

    Result:

    Image #1:

    How to make the text box wider in the table? Image 1 Screenshot 30

    Image #2:

    How to make the text box wider in the table? Image 2 Screenshot 41

    Hope that helps. Contact us again if you have questions. Thank you.

     

  • MIFF17
    Replied on May 24, 2017 at 10:27 PM

    Hi, this is exactly what I need to do too! Do I just use the same code or do I need a different one? Sorry, I don't have any experience with CSS

  • amy
    Replied on May 25, 2017 at 1:33 AM

    Hi Lori,

    Yes, you need only paste the CSS codes which have been given by my colleague. Also, please follow this user guide in order to learn how to inject custom CSS codes

    Please give it a try and if you encounter any problem let us know.

    Thank you so much.

    Regards.

  • MIFF17
    Replied on May 25, 2017 at 2:23 AM

    I'm not the OP, sorry didn't make that very clear!

    Will those codes still apply for me as well or are they specialised for that original table?

    If they are, do I put the whole thing into one line? Or just copy paste the whole thing? 

  • amy
    Replied on May 25, 2017 at 3:24 AM

    Hi again Lori,

    You can apply these codes to your tables too. If you give it a try, you can see the difference on text fields of your form. However, these CSS codes do not change all your forms. As you can see every field has its own name. Such as input_50_0_0, input_50_1_0.

    We apologise if we are not clear enough. You only need to paste the whole CSS codes which my colleague has shared with you to your form that you have specified.

    Please follow these steps:

    1- Edit your form and then click on the "Form Designer" button.

    How to make the text box wider in the table? Image 1 Screenshot 30

    2- Then please click on the CSS tab and paste all the CSS codes which my colleague has shared. Please check the screenshot. You can enlarge screenshots by clicking once on it.

    How to make the text box wider in the table? Image 2 Screenshot 41