Form that have different dropdowns in one row

Also if you think there is a better way to build the form to have different drop downs and text entry fields in one row then please let me know.

As you said it is getting very slow..

I see that my colleagues are working on CSS code to align fields within Configurable List widget. Unfortunately, I do not see other option to show different drop downs and text entry fields in one row. Alternative option could be only to add separate fields using standard form elements and position them into single line. 

If you will need help with this, please let us know.

Hi

That could be an option, but I struggle to get more than 2 fields on one line (by shrinking them).

How can I get say three or four dropdowns on the same line ??

Thanks

Ian

It is possible to reduce the padding for dropdown elements specifically in order to put more fields on the same line:

If you need to place only dropdowns on same line, here is the code:

li[data-type*='dropdown'] {

  padding-right: 0 !important;

  padding-left: 0.5em;

}

We can take a look at your form to adjust the layout if you have already added needed fields there.

But my fields are different lenghts, and there is a text entry field too..

As my colleague have suggested, you may use custom CSS in your fields to align them.

Sample CSS:

#id_3{
    margin-left: -60px;
}
#id_4{
    margin-left: -70px;
}
#id_5{
    margin-left: -70px;
}
#id_6{
    margin-left: -70px;
}
#id_8{
      margin-left: -70px;
}
#input_8{
  width: 300px;
}

Here is my sample Form:https://form.jotform.com/90714817641964

Kindly check it out and let us know if this fits your requirements.