How to style and align two fields side by side

  • curryandtandoor
    Asked on February 3, 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

  • TitusN
    Replied on February 4, 2015 at 3: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! 

  • curryandtandoor
    Replied on February 4, 2015 at 6:53 AM

    Hi

     

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

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

    Thanks for your help.

  • Kiran Support Team Lead
    Replied on February 4, 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.

    How to style and align two fields side by side Image 1 Screenshot 40

    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

    How to style and align two fields side by side Image 2 Screenshot 51

     

    Now, save the JotForm and see the preview should be as shown below :

    How to style and align two fields side by side Image 3 Screenshot 62

    Hope this information helps. Please get back to us if you need any further assistance. We will be happy to help.

     

  • curryandtandoor
    Replied on February 5, 2015 at 2: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

     

     

     

  • Welvin Support Team Lead
    Replied on February 5, 2015 at 6: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!