How to minimize the space between 2 widgets?

How can i minimize the space between the 2 dropdowns? so i can fit 3 of these on 1 row?

You should shrink the fields. In order to do this, you should click on the Properties button of the dropdowns and then go to advanced. Then you should click on Shrink button. This will allow you to have 3 dropdowns in one row.

Let us know if you need any further assistance.

Thank you so much for your reply.

As im not using the regular dropdown element but the configurable list widget because i like the style of it, the widget has too much spacing so it dosn't allow me to have 3 on a row even when shrinked.

Please advise

If you need only the dropdown field from the Configurable list widget, you can have 3 widgets in one row. You should just delete the other fields (Check Boxes, Radio Buttons, Text Area and the Calendar) in the settings of the widget. Then you will need to shrink the widgets. Below is an example:

Let us know, if it works for you. Looking forward to your response.

Thanks for your responsee.

Unfortunatley it dosen't work on my form as each dropdown has too many empty space/margin on their side so i cant shrink 3 on a row

Please advise

Which form are you referring to? We can go and adjust the Configurable List widgets on your form.

Please provide the link or the name of the form and we will setup the widgets for you.

We will wait for your response.

https://eu.jotform.com/build/92464105686361

On page 5

i would like to have #input_384, #input_386, and #input_391 all on one row.

or i can have instead of #input_391 also another configurable list widget

It is not possible to add three widgets in a row on your form, because of the other fields and the CSS code, which you use. However, I would suggest you to use one Configurable List widget and display three dropdowns in it. Please refer to the attachment.

Please give it a try and let us know, if it works for you.

Looking forward to your response.

Thanks for your reply.

Three dropdowns within one cinfugurable list wont work for me as im using conditions on each dropdown seperatley which as far as im aware dosen't work with Configurable list.

Why isn't it possible to minimize the extra space/margin from each widget so it can fit 3 widgets on one row?

You should increase the Input Width and the Form Width fields in the Advanced Designer.

In order to do this, you should click on Form Designer button, which is located at the top right corner in the Form Builder. Then you should scroll down and click on Advanced Designer. While you are in the Advanced Designer, you should click on the Form Layout tab and adjust the Input Width and the Form Width fields.

Let us know if you need any further assistance.

Thanks.

I know that,

but i would prefer keeping this width, why can't i just add a CSS code to minimize the margin if this widgets?

Please allow me some time to check if it is feasible with the custom CSS. I'll get back to you in some time

Thanks.

Thank you very much Roneet

Have you hidden the Configurable list? The Configurable list could not be seen on the Form in the 5th page.

To align the 3 dropdowns in a line you need to do the following:

1. First, move the dropdown to the next line. Next, reduce the width of the dropdown.

2. You have to inject the custom CSS for the second dropdown to reduce the width of the widget. I have taken the Id of the iframe container to reduce the height:

#customFieldFrame_396 {
width: 151px!important;
}
#customFieldFrame_388 {
width: 141px!important;
}

You can use the above code but for each field, you need to replace it with the specific ID.

I have fixed the above two rows.

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please get back to us if you have further questions.

Thanks.

Yupp! That worked amazing!

Thank you Sir!