Style problem with time and date fields in DateTime tool

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

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

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

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

Cheers!