How can I fix the Condensed Hours and Minutes on the DateTime Field?

Why is the time boxes not wide enough and able to display correctly?

To my understanding I believe that you are trying to figure out how to fix the "Time" section of your jotform with Hours and Minutes since they are squashed and display incorrectly as highlighted in red.

I checked your jotform when I clicked on the page link you provided us with but I don't even see that on my end or even the time part since it looks slightly difference. I am under the impression this is because you may have been trying to fix it though since I found it is turned off.

Looking at this more though I believe the reason it's like that is because of the width of your form since you currently have it set to 700 so it is forcing the Hours and Minutes to collapse on itself.

I could also see that it looks like you have used the form designer to make the modifications to your form which means any changes you wish to implement such as adding in your Time to the field would mean that you would have to go back into it and update the css for those fields to fix it from being squashed so that it fits properly in the area you want. So I would suggest using that to correct the css with your Time set to "on" and you should be able to fix it there.

If you need more help with this though just let us know.

I took a brief moment to come up with an alternative solution for you.

You can try injecting in this css code below which should fix it - 

#hour_99 {

    margin-left : 5px;

    width : 50px;

}

#ampm_99 {

    margin-left : 45px;

    width : 50px;

}

#min_99 {

    margin-left : 25px;

    width : 50px;

}

Result:

I did what you suggested and it did indeed work, however I lost all the design aspect so had to go back into design mode and redo the colors. When i previewed the form again the time was all squashed up again. This has now ruined the form as I have been trying to sort it and all the conditional editing has now cocked up. Is there an easier solution to this?  like just adding a time label below the date so they are two separate independent tabs? I have a customer waiting to receive this form via email and it is now doing my head in big time. It is a simple task which should work fine without messing about with any css which i know nothing about.

Please accept my deepest apologies about this creating a bigger mess for you. I'm not sure why that happened unless you might have applied it in the wrong spot or overwrote the original css you had for your existing style.

I'll need a little bit of time to look into this but I will try right now to see if I can help correct and get it the way you want and need it to be for that.

Well I fixed it for the TimeDate part but scrolling down I noticed your form seems to change a lot moving further through it. Also, I'm not coming across any more squashing as of right now but will check it again later on just to be sure since sometimes these things don't happen right away.

Fixed Test Version of your Form: 

http://form.jotformpro.com/form/50996211582964?

Result:

So at the moment I'm not sure what else needs fixed if anything yet but you're more than welcome to check it on my testing version here and clone it back into your account since it is technically your form anyway. 

Here's an example of the updated css I was using to correct it below.

{

    margin-left : 25px;

    width : 50px;

    height : 32px;

    border-width : 2px;

    border-color : black;

    background : #6DD0F2;

}

Hopefully this helps to get you back on your feet with your jotform and just let us know if you need more help with anything else.

Nope still same. I clicked on the testing version and found it all squashed again :(

I checked my colleagues test form both on desktop and mobile and it appears as though the hours and minutes are shown without issue:

You may want to simply his copy of the form if yours is still not producing the same affect as his.

http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

http://form.jotformpro.com/form/50996211582964?

As far as I can tell, this version should show the time section of your date field without issue.

You are looking at the wrong bit. The date and time in question relate to the date/time of the wedding not date of birth. Page 2

Actually yes you are right about that. That was a mistake of mine that i realized now that you said it. I'm very sorry about the confusion I have and I believe I got it going in the right direction now.

Kindly check the test version again please - http://form.jotformpro.com/form/50996211582964? 

Thank you that's fine.

You are very welcome. 

I've moved the secondary question you just asked over here since it is a different topic where I have provided you with an answer as to why that is happening. :)