What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Form widths different on mobile

    Asked by ipbr21054 on May 31, 2016 at 02:46 AM

    Hi,

    I have 2 forms which are perfect on the pc but on the mobile are different.

    Here are the 2 forms both of which have the same problem.

    60705884010349

    60712393428355

    The problem is the message box width.

    On each form the text box fields are all the same width apart from the message box.

    When looking on the pc its perfect.

    When looking on the mobile phone the width is not wide enough & needs to be the same width as the text boxes above.

     

    different problem uploads mobile form widths
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 31, 2016 at 03:32 AM

    Please try to inject this custom CSS code to your form to fix the issue:

    .form-textarea {

     width: 100% !important;

    }

    To inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

  • Profile Image

    Answered by ipbr21054 on May 31, 2016 at 03:43 AM

    Hi,

    I have applied that to form 61505457070350 but it made no difference.

    Please check

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 31, 2016 at 04:04 AM

    I checked the form you mentioned on my mobile device: http://www.jotformeu.com/form/61505457070350 and it seems that the textarea was displayed in the same length as the textbox.

     

    Can you try it again and see if it is working on your end? If the issue still persists, please provide to us the device you are using when you encountered the issue so we can further investigate the issue.

  • Profile Image

    Answered by ipbr21054 on May 31, 2016 at 04:19 AM

    Still the same.

    Did you check my code ?

    This form is perfect on pc & iphone 60894611112349

    These forms are perfect on pc BUT not on iphone 60705884010349 & 60712393428355

    Can you see anything in the codes that might help you ?

     

    I am using iphone 6 plus

  • Profile Image
    JotForm Support

    Answered by liyam on May 31, 2016 at 05:11 AM

    Hello,

    for the CSS codes that declare 100% width on the textarea, please make sure that !important is added. Otherwise it won't work.

    Example, on your form 60712393428355, the current CSS code is this:

    .form-textarea {
    width: 100%;
    max-width: 514px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    What you need to do is find this code and isert !important to make it look like this:

    .form-textarea {
    width: 100% !important;
    max-width: 514px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    Please do the same to the other form.

    If you have questions, please do let us know.

    Thanks.

  • Profile Image

    Answered by ipbr21054 on May 31, 2016 at 06:27 AM

    I cant even find that css.

    I find it so hard to navigate your css as its not straight forward where it is.

    There seems to bee css all over the place.

  • Profile Image
    JotForm Support

    Answered by liyam on May 31, 2016 at 07:11 AM

    Hello,

    It looks like there is limited information on the CSS on the new window for preferences. I had to revert the view back to old and I went ahead to fix the settings for the width instead for you. You can also try reverting back to the old window of preferences in order to see the older version by visiting your form on the form builder with the &old in the end of the URL (example: https://www.jotform.com/?formID=60712393428355&old).

    Anyhow, your concern should be fixed now. You may try viewing the form again on those devices with issues earlier.

    If you have questions, please do let us know.

    Thanks.

  • Profile Image

    Answered by ipbr21054 on May 31, 2016 at 10:59 AM

    Thanks,i thought i was going mad.

    All is ok now and looks perfect.

     

    Thanks very much