How to set Text Box width within tables?

  • jgroover
    Asked on April 9, 2018 at 7:56 PM

    Hi JotForm,

    I'm having an issue with the Width of Text Box Tables in my survey, particularly on mobile version. Is there an easy way to specify a set width for every Text Box within a Table? E.g. set every Text Box field to show 10 characters of width.

    My surveyors will be taking down long Serial Numbers on equipment, and they need to be able to see the whole number in one view to be able to verify that the information they entered is correct.

    Please see the below examples. On mobile, the fields still don't widen any if you turn your mobile device to Landscape.


    1523318176jotform mobile survey LANDSCAP Screenshot 101523318156jotform mobile survey PORTRAIT Screenshot 21

    Jotform Thread 1439763 Screenshot
  • John_Benson
    Replied on April 9, 2018 at 9:50 PM

    We can add a custom CSS code to adjust the width of the Text Box. Could you please provide the form link so we can check it further? 

    You can also try adjusting the width in the Options Properties page. Here's a screenshot:

    15233246042fc22c Screenshot 10

    We'll wait for your reply. Thank you.

  • jgroover
    Replied on April 10, 2018 at 11:03 AM

    Hi John,

    I tried Column Width and it doesn't seem to affect the text box itself. It will make the column bigger, but the text box still stays the same size within the column.

    Here is my survey:

    https://form.jotform.com/jgroover/sbuxsurvey3

    Unfortunately the survey is very long with many Text Box Tables. So I'm hoping there's a quick, easy solution to lock every text box to a set width.

     

  • John_Benson
    Replied on April 10, 2018 at 11:43 AM

    Hi,

    I need more time checking your form. It is very long form and it is lagging on my end. I will contact you again on this thread once I have any updates. 

    Thank you.

  • jgroover
    Replied on April 18, 2018 at 8:51 PM

    Hello,

    Any update you can provide here?

  • John_Benson
    Replied on April 18, 2018 at 10:46 PM

    Please accept my apologies, I thought I have already replied to this thread. It looks like it didn't go through. 

    Here's the custom CSS code that you need to insert into your form so it will be responsive when it is viewed on iPad/Mobile Devices Landscape.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

    .form-matrix-row-headers {

    width: 10% !important;

    }

    @media screen and (max-device-width: 40em)

    .form-matrix-row-headers {

    width: 10% !important;

    }

    Here's a guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Here's the result of my test form:

    1524105994c2a1 Screenshot 10

    I hope this helps. If you have any questions, please contact us again. Thank you.