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

    Make radio buttons widget responsive

    Asked by kauseway on January 01, 2015 at 07:06 PM

    I would like to add radio buttons to my site. But I am also trying to make sure it fits on iphone view without scrolling. So I want it to be responsive. The form works great but once I add the radio buttons the phone view has to scroll. I noticed there was a width and height in the properties section but it did not seem to do anything.

    Is there anyway I can get this to be 100% width so it will fit all screens?

     

    http://form.jotformpro.com/form/50005155818954

    Page URL:
    http://form.jotformpro.com/form/50005155818954

    radio buttons height site scroll
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 01, 2015 at 10:14 PM

    Hi,

    I checked your form on iPhone 6 simulator and it is not showing horizontal scroll bars. It's even working fine and responsive, maybe because the way radio buttons is setup now is arranged in two columns which reduces width which is I think much better to prevent scroll bars.

    Here's a screenshot:

    Let us know should you have further questions. Thank you!

  • Profile Image

    Answered by kauseway on January 01, 2015 at 11:28 PM

    Yes I got it to work if I have 2 rows which doesnt look great. I want to have it 3 across but then it has scroll bars. Anyway to make it responsive and have all three buttons on 1 row? Or have the 3rd button drop down when it gets to narrow?? 

  • Profile Image
    JotForm Support

    Answered by TitusN on January 02, 2015 at 06:17 AM

    Hello, 

    I'm afraid because the widget is loaded from a separate server from your form, it can be hard to make it respond to the form width.

    May I suggest adjusting the three buttons such that it fits both mobile and desktop screens? 

    1. Arrange the buttons into one Column and set the width to 250px: 

    2. Set the Label on Top, and align the button radios to the center of the form: 

    3. Then set your form to be mobile responsive: 

    http://form.jotformpro.com/form/50012628416951?

    Does that help? 

    Please let us know.