time picker widget time field is not showing correctly

this is my form - https://www.jotform.com/build/233122804709452

this element - typeA73 (time picker widget) does not appear properly in the preview

add due to that I am unable to edit the minutes time field.

Hi ilan_ilan190,

Thanks for reaching out to Jotform Support. I tested a cloned form and the time picker widget is working. Check out this screenshot of my result:

Can you explain a bit more about the issue, so I can get a better idea of what's happening? To clarify, do you want to increase the width of the widget when you preview it?

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

I moved your other question to a new thread and helped you with that here.

the fields are not aligned like they should be in the good example, in addition I am unable to choose the minutes because the selection button does not appear!!!

as you can see the selection arrows for the minutes don't appear in the top time picker

Hi ilan_ilan190,

Thanks for your explanation. That helped me understand what’s happening. You can try adding this CSS code to fix the widget display. Let me show you how:

1. Open your form in Form Builder and click on the Paint Roller icon on the right corner of the screen.
2. Go to the Styles tab and scroll down.
3. Paste the code below into the Inject Custom CSS field.

#id_75{

  width: 46% !important;

  margin-right: 51%;

  margin-top: -11%;

}

#customFieldFrame_75{

    width: 289px;

}

Check out this screenshot of my result:

Give it a try and let us know if this works for you.

Hi, thank you for your effort, it is better but still a few problems remain:

• when I'm in the editor (build mode) the fields are on top each other and it looks like this:

• when in preview if I select the right field to adjust the time then the left field drops out of alignment. and it looks like this:

I understand that the solution you gave me is a workaround and not a fix, so it would be great to find the issue causing this to begin with because I fear that in mobile mode it will have problems as well (pay attention that I have a total of 3 time pickers and the other two widgets work great

Hi Ilan,

Thanks for getting back to us. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same problem. The reason behind the layout shift is because of the CSS code you have added to the form:

#id_75 {

    width: 46% !important;

    margin-right: 51%;

    margin-top: -11%;

}

This can be fixed by modifying the custom CSS in your form. Check out the steps below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, remove the margin-right and the margin-top in the Inject Custom CSS area. The code should look like this:

#id_75 {

    width: 46% !important;

}

This will also fix the issue of overlapping fields in the Editor mode. Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes.