Can we change the radio button label width?

  • jetfixer03
    Asked 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 

    Jotform Thread 841661 Screenshot
  • Ben
    Replied 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.

  • jetfixer03
    Replied on May 18, 2016 at 1: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!

  • Ben
    Replied on May 18, 2016 at 2: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:

    Can we change the radio button label width? Image 1 Screenshot 20