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

    Style problem with time and date fields in DateTime tool

    Asked by Marshpin on November 29, 2014 at 06:19 PM

    Hi - my form date and date field are not aligning properly. I've had to turn off the time option in the Quick Tool date/time because it aligned too far to the right and only half the time boxes were visible. I created a separate Quick Tool time field as a work around. Could you please advise how I can correct this - see the form screenshot and the web page link below.

     

    Thank you.

    M Pinsent

    Page URL:
    http://www.woolwichphotographic.com/Studio/bookingform.html

    Screenshot
    problem Time and Date date field time field tool
  • Profile Image

    Answered by Ben on November 30, 2014 at 04:40 AM

    Hi,

    I took a look at your page and I see the issue.

    Since you have broken it up and use 2 different widgets, one for date and the other for time, there are 2 ways to work around the issue:

    1st - continue using two tools

    You can shrink both the DateTime tool and the Time tool after injecting this CSS:

    li[data-type="control_datetime"] span.form-sub-label-container {
        width: 100px;
    }
    li[data-type="control_datetime"] span.form-sub-label-container:last-child {
        width: 20px;
    }
    li[data-type="control_time"] span.form-sub-label-container {
        width: 60px;
    }

    - this will have them both in same row, while in the same time they would be 2 different fields.

    Now I see that they already had the shrink option applied on them, but you have also set them to go to next line so first you will need to set time tool to follow the datetime tool.

    2nd option - setting the datetime to show time as well

    To do this just inject this CSS code into your jotform:

    li[data-type="control_datetime"] span.form-sub-label-container {
        width: 100px;
    }
    li[data-type="control_datetime"] span.form-sub-label-container:last-child {
        width: 20px;
    }
    li[data-type="control_datetime"] span > span.form-sub-label-container, li[data-type="control_datetime"] span > span.form-sub-label-container:last-child {
        width: 50px;
    }
    li[data-type="control_datetime"] span > span.form-sub-label-container:first-child {
        width: 12px;
    }

    - You should of course set the DateTime tool to show time as well for it to style it.

    You can see here how to inject Custom CSS Codes.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • Profile Image

    Answered by Marshpin on November 30, 2014 at 07:21 AM

    Hi Ben. I went with your first option but changed the width from 100px to 50px and that's fixed it.

    Thanks for your help.
    Marshall

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on November 30, 2014 at 10:05 AM

    Very glad to see Ben's workaround fixed the issue for you.

    Cheers!