Style problem with time and date fields in DateTime tool

  • Profile Image
    Marshpin
    Asked 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

  • Profile Image
    Ben
    Answered 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
    Marshpin
    Answered 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
    Jeanette
    Answered on November 30, 2014 at 10:05 AM

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

    Cheers!