Dropdown menu to be aligned in horizontal not vertical

  • b.m.ezzat
    Asked on January 31, 2016 at 1: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

    Jotform Thread 760872 Screenshot
  • Welvin Support Team Lead
    Replied 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:

    Dropdown menu to be aligned in horizontal not vertical Image 1 Screenshot 20

  • b.m.ezzat
    Replied on February 1, 2016 at 4: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

    Dropdown menu to be aligned in horizontal not vertical Image 1 Screenshot 20

  • Elton Support Team Lead
    Replied on February 1, 2016 at 8: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:

    Dropdown menu to be aligned in horizontal not vertical Image 1 Screenshot 20

    Let us know if you need further help.