-
bellspureiceAsked on May 12, 2015 at 2:34 AM
-
BorisReplied on May 12, 2015 at 3: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.
-
bellspureiceReplied on May 12, 2015 at 3: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?
-
BorisReplied on May 12, 2015 at 3: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.
-
bellspureiceReplied on May 12, 2015 at 7: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?
-
jonathanReplied on May 12, 2015 at 9: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.