How do I allow a text box to wrap in order to stay on same line as label?

  • CoordinatorLiaison
    Asked on February 16, 2015 at 1: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?

  • Kiran Support Team Lead
    Replied on February 16, 2015 at 3:14 PM

    Please inject the following CSS code to your JotForm by following the guide How-to-Inject-Custom-CSS-Codes.

    .form-html {

    width: 676px;

    }

    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.

    How do I allow a text box to wrap in order to stay on same line as label? Image 1 Screenshot 30

    Or you may delete it by selecting it from Multiple fields list.

    How do I allow a text box to wrap in order to stay on same line as label? Image 2 Screenshot 41

    Hope this information helps. Please let us know if you need any further assistance. We will be happy to help.

  • GrantsAdmin
    Replied on February 17, 2015 at 10:02 AM

    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.

  • Sean
    Replied on February 17, 2015 at 11:25 AM

    I am currently looking into this for you. I will post an update on this soon.


    Cheers!

  • Sean
    Replied on February 17, 2015 at 11:40 AM

    I added the CSS below to my cloned version form. 

    .form-label-right{
    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:
    http://form.jotformpro.com/form/50474456945969

    Do let us know what you think about this method. We will await your response.


    Cheers!




  • CoordinatorLiaison
    Replied on February 17, 2015 at 12:00 PM

    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.

  • Kiran Support Team Lead
    Replied on February 17, 2015 at 1:23 PM

    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.

    How do I allow a text box to wrap in order to stay on same line as label? Image 1 Screenshot 20

    Please check your JotForm now and get back to us if you need any further assistance.

    Thanks!