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.
How do I allow a text box to wrap in order to stay on same line as label?Asked by CoordinatorLiaison on February 16, 2015 at 01:02 PM
I am sharing a form under SaintsWebmaster with a colleague called Saints Usher Infractions and Sanctions. There are some lines where the text box that we would like to have to the right of the checkmark box on the same line as the label will not go there, but instead falls down to the next line?
An example is the line that reads:
L1 - Late Cancellation...then there is a checkmark box
The description below it which reads Usher cancelled within 48 hours...etc. should be to the right of the checkbox like the others above it, but I can't figure out how to make it go there.
There are several others below Late Cancellation that are like this. Disregard of Orientation, Disruptive Behavior, Verbal Confrontation, Disregard of Duties During Intermission.
It's apparently because of the length of the description, but I'd like to know how to also wrap the text in the box.
Can you help?
Please inject the following CSS code to your JotForm by following the guide How-to-Inject-Custom-CSS-Codes.
Also, there is an invisible clear field after L1 - Late Cancellation checkbox which is causing the text to push into next line. This field can be deleted by right-clicking on it and click on delete. Make sure that you are selecting the field from the boxed region below to avoid selecting and deleting other fields.
Or you may delete it by selecting it from Multiple fields list.
Hope this information helps. Please let us know if you need any further assistance. We will be happy to help.
We still do not have the text on the same line as the check boxes. What CSS code do I need to add. Setting the form width to 676 pixels put all the text boexes below the check boxes. I need the text to wrap. I would be nice to be able to set the width of the text fields.
I am currently looking into this for you. I will post an update on this soon.
I added the CSS below to my cloned version form.
width: auto !important;
padding-left: 0 !important;
I was able to get most of your labels lined up with your check and text boxes. The down fall to the CSS above is that not all the text and check boxes will be lined up vertically as it would in the original form because the width of the labels solely depends on the amount of text placed in each label. The reason why this option was explored is because I could not find an appropriate width that supports all the text in each label for the form.
You can view my test version of the form by following this link:
Do let us know what you think about this method. We will await your response.
I clicked on the link you provided for your test version of the form and none of the text descriptions are next to the checkboxes so I'm not sure that any changes were made.
What we were trying to accomplish was having the text box contents be able to wrap within the box if the description was too long for one line.
It seems that the Custom CSS code was deleted from your JotForm which is resulting not to display them correctly. However, I was able to get that code from my working clone and have copied to your JotForm. The form is now displaying the checkboxes besides to text.
Please check your JotForm now and get back to us if you need any further assistance.