Within an Input Table, how can I make the answer fields wider?

  • Profile Image
    meganthacker
    Asked on January 17, 2018 at 12:31 PM

    The building process is wonderful, but I would like to make the input field wider so that the person filling out the form can see what they have typed so far.

  • Profile Image
    Nik_C
    Answered on January 17, 2018 at 01:00 PM

    Please insert the below CSS into your Custom CSS field:

    #input_7_0_0,#input_7_0_1,#input_7_0_2,

    #input_7_1_0,#input_7_1_1,#input_7_1_2,

    #input_7_2_0,#input_7_2_1,#input_7_2_2,

    #input_7_3_0,#input_7_3_1,#input_7_3_2,

    #input_7_4_0,#input_7_4_1,#input_7_4_2,

    #input_7_5_0,#input_7_5_1,#input_7_5_2 {

      width:90px!important;

    }

    It will work like this:

    1516211957Screen Shot 2018-01-17 at 6.57

    Let us know if you need any further assistance.

    Thank you!

  • Profile Image
    meganthacker
    Answered on January 17, 2018 at 02:41 PM

    Thank you so much! I have one more question. How do I go about changing the width of the question listed in the actual row? And is it possible to only make one of the column text fields wider?1516218059Screen Shot 2018-01-17 at 1.36

  • Profile Image
    Nik_C
    Answered on January 17, 2018 at 03:28 PM

    Yes, you can change the width of the actual text:

    1516220050Screen Shot 2018-01-17 at 9.13

    By inserting the below CSS in your custom CSS field:

    th.form-matrix-row-headers {

        width: 150px!important;

    }

    Just adjust the number.

    Regarding the text boxes here are the CSS codes for each row:

    Yes:

    #input_33_0_0,

    #input_33_1_0,

    #input_33_2_0,

    #input_33_3_0,

    #input_33_4_0,

    #input_33_5_0,

    #input_33_6_0,

    #input_33_7_0,

    #input_33_8_0 {

    width:50px!important;


    }

    No:


    #input_33_0_1,

    #input_33_1_1,

    #input_33_2_1,

    #input_33_3_1,

    #input_33_4_1,

    #input_33_5_1,

    #input_33_6_1,

    #input_33_7_1,

    #input_33_8_1 {

    width:50px!important;


    }

    Explain:


    #input_33_0_2,

    #input_33_1_2,

    #input_33_2_2,

    #input_33_3_2,

    #input_33_4_2,

    #input_33_5_2,

    #input_33_6_2,

    #input_33_7_2,

    #input_33_8_2 {


    width:50px!important;

    }

    Just change the numbers for width accordingly.

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    meganthacker
    Answered on January 18, 2018 at 10:37 AM

    Thank you again for your help! Everything worked, except for when I put in this code:

    th.form-matrix-row-headers {

        width: 150px!important;

    }

    1516289739Screen Shot 2018-01-18 at 9.34

    In the editing viewer, only the input tables adjusted like I wanted them to.

    But as soon as I leave editor and preview the form, it changed the width of the question texts on all questions.

    1516289767Screen Shot 2018-01-18 at 9.34

     

    I'm very unfamiliar with coding, so again I appreciate the help!

    Here's my URL: https://www.jotform.com/build/80156344000846

  • Profile Image
    Nik_C
    Answered on January 18, 2018 at 11:49 AM

    For that particular field, this CSS would work to decrease the width of the text:

    #cid_33 > table > tbody > tr:nth-child(2) > th {

        width: 100px!important;

    }

    1516294080Screen Shot 2018-01-18 at 5.46

    I inserted that CSS to your Custom CSS Field:

    1516294174Screen Shot 2018-01-18 at 5.46

    Please check and let us know if that works for you.

    Thank you!

  • Profile Image
    meganthacker
    Answered on January 18, 2018 at 12:01 PM

    I'm sorry, I wasn't clear enough. The width of the question within the input table was fine the way it was (340px), but the bold text above the input table (and most other questions in bold) is what is now too narrow.

    Here is what it looks like in the editor (the way I want it to look):

    1516294829Screen Shot 2018-01-18 at 10.5

    1516294867Screen Shot 2018-01-18 at 11.0


    And here is what it looks like in view mode:

    1516294735Screen Shot 2018-01-18 at 10.5

    1516294766Screen Shot 2018-01-18 at 10.5

  • Profile Image
    Nik_C
    Answered on January 18, 2018 at 12:28 PM

    I'm sorry for the misunderstanding, I inserted this CSS:

    .form-label.form-label-auto {

        display: inline!important;

    }

    That should fix the labels.

    1516296467Screen Shot 2018-01-18 at 6.27

    Please check and let us know how it worked.

    Thank you!