-
CoordinatorLiaisonAsked 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 LeadReplied 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.
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.
-
GrantsAdminReplied 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.
-
SeanReplied 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! -
SeanReplied 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! -
CoordinatorLiaisonReplied 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 LeadReplied 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.
Please check your JotForm now and get back to us if you need any further assistance.
Thanks!