Make radio buttons widget responsive

  • kauseway
    Asked on January 1, 2015 at 7: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

  • Elton Support Team Lead
    Replied on January 1, 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.

    Make radio buttons widget responsive Image 1 Screenshot 30

    Here's a screenshot:

    Make radio buttons widget responsive Image 2 Screenshot 41

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

  • kauseway
    Replied on January 1, 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?? 

  • TitusN
    Replied on January 2, 2015 at 6: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: 

    Make radio buttons widget responsive Image 1 Screenshot 50

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

    Make radio buttons widget responsive Image 2 Screenshot 61

    3. Then set your form to be mobile responsive: 

    Make radio buttons widget responsive Image 3 Screenshot 72

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

    Make radio buttons widget responsive Image 4 Screenshot 83

    Does that help? 

    Please let us know.