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.
How to style and align two fields side by sideAsked by curryandtandoor on February 03, 2015 at 10:58 PM
How do I reduce the width of a single field? I'm trying to line-up 2 fields side by side, but even after shrinking them the usual way, they still don't fit within my form width although there is ample space.
I imagine this is the form you are reffering to: http://www.jotform.com/50338599042459
Please identify the two fields for us so that we can assist with the relevant CSS code you will need to align them side by side.
Looking forward to your response.
The 2 fields are Event Date & No. of Pax.
Thanks for your help.
Please make the following changes to your JotForm in order to align the fields on the same line.
1. Align the Label to Left for the Event Date from the tool bar.
2. I see that some CSS code is already added through the designer. Now, goto the Form Designer by clicking on Designer icon and then click on CSS on the top-right corner to edit the CSS code.
Find the following CSS code form the CSS view for the class .form-line-column and reduce the value to 260px. That is the code should be now
Now, save the JotForm and see the preview should be as shown below :
Hope this information helps. Please get back to us if you need any further assistance. We will be happy to help.
Thanks so much.
For the same form,1) I have extremely large white space at both top & bottom. Tried many ways to fix it, but nothing seemed to work. So I set the background to "none" (just to cosmetically to hide it). What's the correct CSS to use?
2) The form is also cut off at the top. The form has rounded corners which are visible for the bottom edge, but at the top, it is cut-off.
Appreciate your advise on what to do.
We're glad that we could help. As for the two new issues, I moved it into separate threads. Please find the links below:
For the Top and Bottom whitespace: http://www.jotform.com/answers/510371
For the top radius of the form: http://www.jotform.com/answers/510372
Will attend to both threads after this one.