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

    Mobile responsive isn't working for drop-down and sub-labels

    Asked by arielyem on May 19, 2017 at 04:08 PM

    Hi,

    My form doesn't respond the same with computer screen and mobile.

    The main problems are:

    In mobile, the drop-down wide  shrieked, while other cells responded properly to the mobile screen wide. How can i make the drop-down wide to work the same?

     

    Also, injected sub-labels do not responded in mobile too. I used the following css code for example:

    #cid_261 label.form-sub-label {

        text-align : center;

    In the computer screen it works well, but in mobile it isn't alignment to the center.

     

    Please help!

    Thanks

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on May 19, 2017 at 06:00 PM

    To fix the width of the drop-down field you described in your screenshot, I suggest you add the following CSS codes to your form:

    @media screen and (max-width: 480px)

    {

    #cid_401 {

    width: 100% !important;

    }

    }

     

    Result:

    As for the sub-labels, aside from having "text-align: center;", please include the following to each code for the sub-label you want to appear centered on mobile devices.

    width: auto;

    So, in your example, it will be:

    #cid_261 label.form-sub-label {

        text-align : center;

        width: auto;

    }

     

     

    Result:

    I hope this helps. If in any case, any of the instructions above is unclear or if the codes are not working, please let us know and we will be glad to test it again for you. You can also include the link to your website where the form is embedded.

    Thank you.

  • Profile Image

    Answered by arielyem on May 19, 2017 at 07:50 PM

    Thank you - It works!

    Is there any way to make this change effective for all the dropdown, rather than do it for each dropdown separately ?

     

  • Profile Image
    JotForm Support

    Answered by John_Benson on May 19, 2017 at 11:53 PM

    Yes, that is possible. We can provide you a custom CSS code to fix the width of all the drop down menu to your form. Could you please share the form ID or form direct link of the form where you want to inject the custom CSS code so we can check it further? 

    We'll wait for your response. Thank you.

  • Profile Image

    Answered by arielyem on May 21, 2017 at 04:41 AM
  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 21, 2017 at 07:57 AM

    Hello arielyem,

    I have fixed this issue by injecting following custom css code in your form:

    @media screen and (max-width: 480px){

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

        width: 100% !important;

    }

    }

    Hope this helps.

    Do get back to us if you have any questions or meant to ask something else.

    Thank you!

  • Profile Image

    Answered by arielyem on May 21, 2017 at 09:40 PM

    Thanks!