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

    Changing the width of the date/time field

    Asked by bellspureice on May 12, 2015 at 02:34 AM
    Also I have added a date/time control and I can't get the individual day-month-year-hour-minute-second boxes to the correct width.  If I leave the Time option off then the date looks good but when I turn Time on the boxes shrink down too small and the time boxes move below the date boxes.
    css calendar icon
  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 03:18 AM

    I see the issue, it is caused by the setting that forces input fields to be only 150px wide, and the entire date/Time field is technically a single input field.

    You can fix it by adding the following code into the textbox under the CSS tab:

    [data-type="control_datetime"] .form-input, [data-type="control_datetime"] .form-input-wide {
      max-width: none !important;
    }

    It will cancel the width constraints on the Date/Time picker, and it will display like this:

    Please let us know if you need further assistance, we are here to help.

  • Profile Image

    Answered by bellspureice on May 12, 2015 at 03:32 AM

    Thanks Boris, that helped to make the day, month, year boxes wider but the time boxes are still too narrow to display a number.  Do you have a fix for these as well?

     

  • Profile Image
    JotForm Support

    Answered by Boris on May 12, 2015 at 03:51 AM

    Certainly. Please try adding the following CSS as well:

    .allowTime span:not(.form-sub-label-container) > .form-sub-label-container {
      width: auto !important;
    }
    .allowTime .form-sub-label-container:last-of-type {
      margin-left: 3%;
    }

    It should make your Date/Time picker look like this:

    I believe that this is what you are looking for. Please let us know if we can help you any further, and we will be happy to do so.

    Kind regards.

  • Profile Image

    Answered by bellspureice on May 12, 2015 at 07:35 PM

    Thanks very much Boris, that's very helpful and it looks much better.  Just one thing though - now the date picker icon is over to the right of the time picker boxes and it won't be as intuitive to the users.  Is there any way to move the picker in between the year and the "at" label?

  • Profile Image
    JotForm Support

    Answered by jonathan on May 12, 2015 at 09:51 PM

    To move the calendar icon more to the left, add this CSS code to the form http://www.jotform.co/form/51307084193856

     

    .showAutoCalendar {

        margin-left : -212px;

    }

     

     

    it work like this on my test form http://www.jotformpro.com/form/51318681208959

     

    Let us know if this did not work for you.

    Thanks.