How to align 3 fields into same line?

Hi Jotform team,

I'm trying to place three Dynamic Dropdown fields — Chest, Insleeve, and Insleeve 0.25 — on the same horizontal line in my form.

Unfortunately, enabling the “Shrink” option only seems to allow me to fit two fields per row. I’ve tested multiple layout settings and CSS, but since I absolutely need to use Dynamic Dropdown widgets, I’m limited in how they can be positioned.

Could you please advise how I can make all three Dynamic Dropdowns appear side-by-side on one line without wrapping?

Thanks in advance for your help!

Best,

Rachel

Hi Classy,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

To place three Dynamic Dropdown fields side-by-side on the same line, enabling the "Shrink" option alone may not be enough since it typically fits two fields per row. Here’s how you can try to achieve this:

1. Enable Shrink for all three dropdown fields by opening each field's properties, going to the Advanced tab, and toggling Shrink on.
2. Adjust Form Width to ensure there is enough space for three shrunk fields to fit on one line.
3. Inject Custom CSS if needed, to force the three Dynamic Dropdown widgets to align horizontally without wrapping. This might involve setting specific widths and float properties.

Since Dynamic Dropdown widgets have some layout limitations, custom CSS is often required to perfectly align three or more on the same line.

Give it a try and let us know how it goes.

Best regards,
Jotform Support

Hi Rachel, 

You can easily align the fields that you mentioned by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

li#id_129, li#id_107, li#id_130 {

width: calc(27% - 8px);

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

See the screenshot below for the results:

Give it a try and let us know how it goes.