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

    How to align the drop down fields properly on mobile device?

    Asked by Jack1st on March 20, 2017 at 08:44 AM

    Hi,

    I have an issue regarding the width of my dropdown menus in the form GP d'Australie. It is OK on Safari on my Mac, but not on the iPhone... <the drop down menu and the label are not on the same line or the dropdown menu is shriked. I have these forms since years and never has a problem before. 

    What can I do ??'

    Thanks for your help.

    Best regards,

    Jacques

    Page URL:
    https://form.jotformeu.com/70775402817358

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Kiran on March 20, 2017 at 11:14 AM

    Since the form is optimized to mobile devices, the dropdowns are adjusted to the size of the screen and so the labels are moved to the top of the input field. In order to display the label to the left of the dropdown, you may inject the following CSS code to the form along with aligning the label to right of the input field.

    @media only screen and (min-device-width: 320px) and (max-device-width: 736px) {

    li[data-type="control_dropdown"] > div.form-input {

        width: 83% !important;

    }

    }

     

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image

    Answered by Jack1st on March 21, 2017 at 03:09 AM

    Hi Kiran,

    Thanks for your answer. It works.
     
    But, how to solve the difference of alignement of the dropdown between rows 1-9 and row 10 which is a bit on the right.
     
    Only on the iPhone
     
    Thanks for your reply.
     
    Best regards,
     
    Jacques
     
     
     
  • Profile Image
    JotForm Support

    Answered by Nik_C on March 21, 2017 at 08:37 AM

    Hello Jacques,

    The problem occurred because the number 10 is with two digits. So to align it properly please add the below CSS code to the existing one:

    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

        li[data-type="control_dropdown"] > div.form-input {

            width : 83% !important;

        }

      #cid_15{ 

      width:82%!important;

      margin-left:-9px;

      }

    }

    So just copy the green part of the code.

    It will work like this on iPhone:

    Let us know how it worked for you.

    Thank you!

  • Profile Image

    Answered by Jack1st on March 21, 2017 at 10:04 AM

    Thanks, it works !

    But, is there any possibility to align the dropdowns on the right side ???

     

     

  • Profile Image
    JotForm Support

    Answered by Kiran on March 21, 2017 at 12:16 PM

    You may add float: right; after the width section in the code provided as shown in the code below: 

    @media only screen and (min-device-width: 320px) and (max-device-width: 736px){

        li[data-type="control_dropdown"] > div.form-input {

            width : 83% !important;

            float: right;

        }

    Let us know if you need any further assistance. We will be happy to assist.