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.
You can extend the bar size of the dropdown with this way :
While your mouse selected the dropdown menu, click the width and then change the number in there. This will extend or shorten the bar depends on your want.
Alternative way to change bar size of the dropdown menu, you can use the Designer for this. To access the designer, Click to "Setup & Embed" then click to "Designer".
In "Designer", you need to click "CSS" first, then select the dropdown menu. You will see the ID of that label and feature that you can do to it. In this scenerio, we want to change its width; so click to the width and enter the value you want. The bar of the dropdown will be extend.
I've tried both ways, and it doesn't seem to work at all - really frustrating!
I've just expanded the drop down.
However now the 'How Did You Find Us?' doesn't fit on one line.
Is there a way I can create some space so all are equal?
Please advise -
Could you try using this custom CSS code:
width : 140px !important;
padding : 0px 1px 4px 0px !important;
Add it under the CSS area in your Form Designer Tool.
You can adjust the width value with your own preference, here's how the change looks like: http://form.jotformpro.com/form/52284873508968. I cloned your form for testing and demo purposes. You can also clone my form if you want to use that instead.
Do let us know if you need more help on this.
Thanks for the help!
Just so I know in future - to make the whatever the px is, you should put !important after it, so it does stay as that px?
Yes, the "!important" is used to give priority to the design or style applied or to override the existing one. But it's better to check that there's no other CSS styling that points to the same element to avoid conflict. You can check this article link to learn more about it.
I hope that helps. Do let us know if you need more help on this.