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

    Word Wrap in a Form Field's Sub Label

    Asked by tdiintl on July 01, 2013 at 12:09 PM

    Hi!  I'm using the theme "solid" for some online quote request forms.  On my large screen the forms look fine but when I try it on my phone or on a very small screen some of the elements are too wide.

    For instance, I have a form field using a text box and that text box is 400px wide.  I have a sub label with some text in it.  When viewed on the small screens the text goes beyond the gray box used in the theme.  I need to have the text wrap if possible.

    If not, perhaps the gray box behind the fields could be made a bit wider?  Either solution would be fine with me, thanks!

    Page URL:
    http://www.tdiinternational.com/contents/en-us/d608_2444d-desiccator.h<br/>tml

    Screenshot
    label form field elements wide
  • Profile Image
    JotForm Support

    Answered by Welvin on July 01, 2013 at 01:17 PM

    Hi,

    Please try to inject this custom mobile CSS query to your form so the field label width will adjust when viewed on mobile devices:

    @media only screen and (max-device-width: 550px){

    .form-sub-label {

    width: 250px;

    }

    .form-sub-label-container {

    white-space: normal;

    }

    }

    Here'e the guide on how you can inject this to the form: How to Inject Custom CSS Codes

     

    Let us know for the results.

    Thanks

  • Profile Image

    Answered by tdiintl on July 01, 2013 at 02:59 PM

    I will definately give that a try and thank you!  Is there a way to word wrap though?  We do have a decent amount of visitors using smaller resolution monitors as well.  I need to make sure it looks good for them too.

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 01, 2013 at 03:30 PM

    Yes, please try Welvin's code, it should add the word wrap too.

    For example, on some old device with 320x480 resolution it will be like this:

    Thank you.

  • Profile Image

    Answered by tdiintl on July 01, 2013 at 03:43 PM

    Ok thanks!  As soon as I get a chance to try one and test it out I will post my results

  • Profile Image

    Answered by tdiintl on July 01, 2013 at 04:41 PM

    Works like charm :) thanks guys!

  • Profile Image

    Answered by pinoytech on July 01, 2013 at 04:52 PM

    On behalf of my colleague Welvin, you are quite welcome! If you need our assistance again, feel free to contact us at anytime.

    Have a nice day!