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 can I align date and time fields?

    Asked by YummyGarden on January 13, 2016 at 01:33 PM

    I've tried searching the forums, but I cannot find a direct answer to my issue. There is plenty of space on my form, so why is the date and time fields not lined up together?

    It's like, on a half line down.

    See photo:

    Page URL:
    https://form.jotform.com/60114971792155

    Screenshot
    date and time same line same and
  • Profile Image

    Answered by Carina on January 13, 2016 at 04:35 PM

    Is this form embed on a website? If so please let us know the url so we can run further tests.

    I've test the form but could not find the same gap. From my tests, the difference of height between text-box fields and dropdown can help to create this situation:

    By increasing the textbox height this situation can be solved. You can add this css code or clone the demo form:

    .form-textbox

    {height: 36px;}

    Let us know if we can assist you further.   

     

  • Profile Image

    Answered by YummyGarden on January 13, 2016 at 05:03 PM

    The css code has not provided positive results. I am still having the same issue. It's the same when I view my form exclusively as well as the embed.

     

    Website here: http://www.barrelsoffunva.com/#!booking-form/mbb10

  • Profile Image
    JotForm Support

    Answered by BDAVID on January 13, 2016 at 09:56 PM

    Please inject the following CSS code in order to fix it: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_71{

        margin-left: 20px !important;

    }

    .showAutoCalendar {

        margin-left: -10px !important;

    }

    Example: https://form.jotform.com/60128300833950

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image

    Answered by YummyGarden on January 27, 2016 at 12:56 PM

    My problem still persists.

  • Profile Image

    Answered by YummyGarden on January 27, 2016 at 01:45 PM
    ​This still has not worked.
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on January 27, 2016 at 04:56 PM

    Please add the CSS codes below to your form: How-to-Inject-Custom-CSS-Codes

    #id_71, #id_65, #id_64{

    padding-left: 36px !important;

    padding-right:18px !important;

    }

    .allowTime-container span{

    height: 44.815px !important;

    }

    .time-dropdown{

    height: 25px !important;

    padding-bottom: 4px !important;

    padding-top: 4px !important;

    }

    .allowTime-container .form-sub-label{

    margin-top: 0px !important;

    }

    .allowTime-container span:nth-child(1){

    min-width: 20px !important;

    margin-right: 5px !important;

    }

    Click the link to view the clone version of your form after I have added the codes above. https://form.jotform.com/60266308045956

    Let us know if you need any further assistance. Thank you.

  • Profile Image

    Answered by YummyGarden on January 27, 2016 at 05:08 PM

    This does work to fix the alignment, but it creates a dramatic issue with all of the other text boxes, making them extremely long.

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 27, 2016 at 10:50 PM

    I checked the original form and the cloned form that my colleague made. It seems like the two look identical aside from the alignment of the date field in the cloned form.

    Original Form (https://form.jotform.com/60114971792155):

    Cloned Form (https://form.jotform.com/60266308045956):

    So far I don't seem to notice any field that is longer than the fields from the original. I also cloned the original form and applied the css on my end. The result was the same as the cloned form that my colleague made.

    My cloned form:

    Can you please provide us a screenshot of the issue you are having so we may investigate it further? We will wait for your reply.