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

    Image Radio Buttons Widget Bug: Align the images top to bottom on mobile devices

    Asked by jaiswal78 on October 05, 2015 at 04:25 AM

    In my form, there is another issue which have come up regarding responsiveness - for which I will raise another topic. This issue of this thread can be closed.

  • Profile Image
    JotForm Support

    Answered by beril on October 05, 2015 at 04:53 AM

    Hi,

    If  I understood your question correctly. I see that your form is responsive from my side.

    Can you copy and paste the code below to your CSS from Designer?

     

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

    .form-line{

    width: 100%;    

    }

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 75% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

     

    Here is how to do this:

    1) Click on Setup & Embed. 

     

     

    2) Click on Designer. 

     

     

    3) Click on CSS.

     

     

    4) Copy & paste the code above to CSS.

     

    5) Click on save button.

     

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by jaiswal78 on October 05, 2015 at 06:16 AM

    Hi Beril,

    Thanks for your answer, but this have not helped me. In the form the options are still coming in one row and the user will have to scroll sideways to see all the options. Please see the attached screenshot.

     

     

    I would like that those options which are not able to come in the width of the screen should convert to row and come down, so that the user will have to scroll only vertically and not side ways. (see below modified image of this screenshot.

     

  • Profile Image
    JotForm Support

    Answered by beril on October 05, 2015 at 08:53 AM

    Hi,

    Unfortunately, I see that, with this widget, images are not align top to bottom on mobile phone.

    I forwarded it to our developers and we will inform you as soon as possible, when we solve the problem. 

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image
    JotForm Support

    Answered by TitusN on October 06, 2015 at 02:00 AM

    Hello, 

    Please try the Mobile Responsive Widget.  It will help resolve the mobile responsiveness automatically for most fields: 

    Also - try using a wider margin for your buttons (15%): 

    Here's a copy of your form - http://form.jotformpro.com/form/52781456680968? - its not perfect, but its a good start - right? 

    Let us know. 

  • Profile Image
    JotForm Support

    Answered by TitusN on October 06, 2015 at 02:25 AM

    Oops - I also re-added your CSS custom Code for animating the color and adding the circular border right below the 15% border declaration: 

    .images_button_container {

          display:inline-block;

          box-sizing:border-box;

    }

    li div.default, li div.active {  

           background-repeat: no-repeat !important;

           background-position: center !important;

           margin: 5px   64px;

    }

    li div.default{

           padding: 20%;

           background-size: 75% 75% !important;

           -webkit-border-radius: 50px;

           border: 1px solid #000000;

    }

    li div.active{

           background-color: #fec11f  !important;

           padding: 25%;

           background-size: 80% 80% !important;

           -webkit-border-radius: 12px;

           border: 0px solid #000000;

    }

    Let us know if this helps. 

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

    Thanks

  • Profile Image

    Answered by jaiswal78 on October 07, 2015 at 04:48 AM

    Hi,

    Thanks for your support. It worked.

  • Profile Image
    JotForm Support

    Answered by Charlie on October 07, 2015 at 09:38 AM

    In behalf of my colleagues, you are welcome.

    Should you need any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by beril on October 08, 2015 at 04:10 AM

    Hi,

    I am happy to hear that, the problem is solved.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.