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.


  • Profile Image

    Can we change the radio button label width?

    Asked by jetfixer03 on May 18, 2016 at 10:06 AM

    First, as a new user with no coding skills, I think this is a great product with great customer service.  Usually tools that are 'easy' and require no coding equate to disappointing flexibility and amateurish results.  Not so here, thanks.

    Is there a CSS code I can inject to make radio button labels much wider?  I think the format I'm shooting for is common, but I haven't seen a good answer that I could use.  The screenshot is what I'm trying to emulate, left or right side for the buttons is irrelevant.  

    Thanks!

    Jetfixer03 

    Screenshot
    label label width radio button label css code format product tools
  • Profile Image

    Answered by Ben on May 18, 2016 at 12:36 PM

    Based on the screenshot I would say that you are not looking to only adjust the width of the label, but to make it so that the width uses most of the screen and the buttons get set next to the same all in one line.

    Since the CSS would be different, I would like to confirm this first, but once we know that that is what you wish, we can play around with CSS and have it sorted like that.

    I do however recommend checking out the Matrix field (found under Survey fields/tools) on the left.

    It will allow you to use radio buttons with labels at the top showing Yes or No and questions next to each, otherwise each radio button field would need to be styled to get the look that you are after.

  • Profile Image

    Answered by jetfixer03 on May 18, 2016 at 01:06 PM

    Thanks for your response.  You are correct, however I did a work-around with the design and it actually looks pretty good.  I selected 'top' for the alignment and used 2 columns for the buttons.  The buttons are under the question rather than next to it, but this does allow the question to span the entire width of the form.

    I'll play around with the matrix as well, just to have another tool in my bag, so to speak.

    FWIW, being able to set up that format via the preferences would be a nice feature that I think many would find useful.

    Thanks again!

  • Profile Image

    Answered by Ben on May 18, 2016 at 02:25 PM

    I did notice that last time, that is why I wanted to re-confirm the layout.

    With your current setup you could do something like this:

    [data-type="control_radio"] > label, [data-type="control_radio"] > div {
        display: inline-block;
    }
    [data-type="control_radio"] > div {
        float: right;
    }

    It will set the radio options on the right and labels on the left.

    Like this: