Changing the width of the date/time field

  • Profile Image
    bellspureice
    Asked 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.
  • Profile Image
    Boris
    Answered 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
    bellspureice
    Answered 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
    Boris
    Answered 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
    bellspureice
    Answered 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
    jonathan
    Answered 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.