Changing the width of the date/time field

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.

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.

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?

 

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.

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?

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.