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.


  • Profile Image

    How to style and align two fields side by side

    Asked 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.

     

    Thanks

    form width side by side
  • Profile Image
    JotForm Support

    Answered by TitusN on February 04, 2015 at 03:40 AM

    Hello, 

    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. 

    Thanks! 

  • Profile Image

    Answered by curryandtandoor on February 04, 2015 at 06:53 AM

    Hi

     

    Form ID http://www.jotform.com//?formID=50338599042459

    The 2 fields are Event Date & No. of Pax.

    Thanks for your help.

  • Profile Image
    JotForm Support

    Answered by Kiran on February 04, 2015 at 10:12 AM

    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.

     

  • Profile Image

    Answered by curryandtandoor on February 05, 2015 at 02:37 AM

    Hi

    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.

    Thank you

     

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on February 05, 2015 at 06:18 AM

    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.

    Thank you!