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.
What controls when text in a checkbox or radio button will wrap?Asked by Benflips on July 12, 2016 at 06:32 AM
Hi. The example for this question would be on page 2, the 2 options under 'Tick only if you do not agree to the following:'
On the form builder, it has both wrapping, on the preview, only the first option wraps, but it 'looks' to me as though there is more horizontal space.
Is it the width of the element/control itself, or the width of the form?
checkbox form builder radio button wrap checkbox button
This is a normal behavior. In the Form Builder, the elements are being shrink by the work space. The final output can be seen in the Form Designer preview or by opening the actual form.
The sentence in the 1st option is longer than the 2nd. In the Form Builder, the width is smaller but in the actual form, the width is around 750px.
Let us know if you have any questions. Thank you.
Yes. I gathered that.
What I was trying to define is can I change the width of just this field so
that both options will display on one single line each...unless I view on a
*Dr. Ben Phillips*
Please be noted that the form is mobile responsive by default and the fields are adjusted automatically based on the device screen unless we add any custom CSS code to alter the display of the fields.
For this particular fields, I see that there is already some custom CSS code applied on your JotForm for the labels in radio buttons, checkboxes and padding applied to the form columns which may be causing the issue with the width of the label. In order to have the CSS code to be responsive, we can have the code using Media queries. Please see the article below that might help with this.
Please get back to us if you need any further assistance. We will be happy to help.