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

    Dropdown menu to be aligned in horizontal not vertical

    Asked by b.m.ezzat on January 31, 2016 at 01:57 AM

    Dears

    Am having three drop down menu which are lined vertically in 3 lines, i want them to be in one horizontal line next to each other

    Please support 

    Attached snapshot of the three options lined vertically

    Page URL:
    https://form.jotform.com/52545237519964

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Welvin on January 31, 2016 at 12:35 PM

    You have to consider changing the width of the dropdowns. After that, shrink the fields. Please check the following guide for more on field positioning:

    https://www.jotform.com/help/90-Form-Field-Positioning

     

    If that doesn't help, access the form designer and enable the columns there:

  • Profile Image

    Answered by b.m.ezzat on February 01, 2016 at 04:24 AM

    i did as you mentioned but i was able to put only 2 dropdown menu in same line, however i want to put the three in one line can you support in this

     

    Also i dont want to change the size of any other drop down menu in the form

  • Profile Image
    JotForm Support

    Answered by EltonCris on February 01, 2016 at 08:52 AM

    If you don't want to resize the dropdown fields, you might want to consider reducing the left and right spacing between them.

    Inject this CSS codes to your form, this should align the 3 column fields into a single row.

    .form-col-1 {

        padding-right: 5px;

    }

    .form-col-2,

    .form-col-3 {

        padding-right: 5px;

        padding-left: 5px;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it at the bottom part).

    Result:

    Let us know if you need further help.