What controls when text in a checkbox or radio button will wrap?

  • Benflips
    Asked on July 12, 2016 at 6: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?

  • Jan
    Replied on July 12, 2016 at 1:13 PM

    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.

  • Benflips
    Replied on July 12, 2016 at 8:45 PM
    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
    smaller device.
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Kiran Support Team Lead
    Replied on July 13, 2016 at 12:36 AM

    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.

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Please get back to us if you need any further assistance. We will be happy to help.