How to style and align two fields side by side

  • Profile Image
    curryandtandoor
    Asked 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

  • Profile Image
    TitusN
    Answered 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
    curryandtandoor
    Answered 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
    Kiran
    Answered 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
    curryandtandoor
    Answered 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
    Welvin
    Answered 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!