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

  • arielyem
    Asked on May 19, 2017 at 4: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

    Jotform Thread 1149584 Screenshot
  • Mike_G JotForm Support
    Replied on May 19, 2017 at 6: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:

    Mobile responsive isnt working for drop down and sub labels Image 1 Screenshot 30

    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:

    Mobile responsive isnt working for drop down and sub labels Image 2 Screenshot 41

    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.

  • arielyem
    Replied on May 19, 2017 at 7: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 ?

     

  • John_Benson
    Replied 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.

  • arielyem
    Replied on May 21, 2017 at 4:41 AM
  • Ashwin JotForm Support
    Replied on May 21, 2017 at 7: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!

  • arielyem
    Replied on May 21, 2017 at 9:40 PM

    Thanks!