Date Picker: Why is the year field too small when the read only property is enabled?

Hi,

On my form 51347150259958 I have a field that displays current date. If I set the field to read only the year field width contracts so the year cannot be read.

I do have some injected css code to center the displayed date, #day_26,#month_26,#year_26 {text-align:center}

Could that possibly cause this to happen? It works fine if not read only.

Thank you,

Robert

Seems like the issue has to do with the theme, I have removed it and the field worked fine, you can see my cloned form here: https://form.jotformpro.com/72397942105965 

The code you have injected does not seem to be affecting the field. You could also inject this one to fix the issue: 

[data-type="control_datetime"] .form-sub-label-container:last-child {

    width: 28% !important;

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps. 

Hi,

YEP! That injected css fixed it. 

Thank you, Robert

FYI,

This happens on any form I have and use read only for date.

This fix works on them all but shouldn't this be directed to 2nd level for a permanent fix?

Thanks again, well done!, Robert

Do your cloned forms have the same theme/layout?

May you please provide us with another sample form? 

I think we would need to edit the theme that has been applied to the form, I will also ask for the theme that was applied to the form 51347150259958 so we can edit the CSS applied to the date field.

Hi,

I do clone some forms and not others. I try and use the same formatting so the forms have the same appearance. I don't select a theme but used Advanced Designer. Another form that I used the injected css code above; 52745887899988.

Do you want to know what setting I use in Advanced Designer?

Hope this helps,

Robert

Could you let us know or provide us with the link to the template or theme that you have been using for your forms so that we can check if we can change it in the template itself?

We will wait for your response. Thank you! 

Hi,

I'm not sure what to say... I don't use a template. I use the designer to help me format the fields shape, background image and input fields background color. All custom. I also add some injected code for heading text and a form shadow. I may also add additional css to adjust some form fields. it is my personal recipe. If you examine any of my forms you will get a general idea. Perhaps I should make a template but hadn't thought of it. There not very complicated.

I might suggest you make some simple forms using the designer with a date picker and try setting it to readonly. You may get the same results.

Sorry I can't offer more or perhaps I could if I better understood what you are looking for.

best regards,

Robert

Upon checking the form without the CSS that my colleague has provided, I was able to replicate the issue. I tested it again by enabling the Time Field and the issue was fixed. Here's my screen capture test:

I was not able to replicate the issue by following the guide you have provided:

If my test form is incorrect please let us know. Thank you.

 

Hi,

The issue is not that the css has fixed the problem, it is that the problem exists and has to be fixed with the custom css script. As Kiran said:

Again I suggest you try a form with any template or theme you have and see if it is replicated. I think perhaps the issue needs to go to second level, but that is your decision not mine. I have given you all the info I think I can provide.

So that is all I can do or offer with this. I used the code above above as a fix and I don't mean to be flippant, but now I am done with it.

Thank you, Best Regards, Robert 

To my understanding, you are having this issue on, if not all, most of your forms, is that correct? I also understand that the issue is fixed when you inject the CSS codes that my colleague, Kevin_G, provided above.

After further investigating the issue, I can only assume that the forms you are currently using was derived or was cloned from an old form. Old forms used to have the Nova theme which was the form's default theme before. 

That old theme has its own old default CSS which is still in effect on your form(s).

[data-type="control_datetime"] .form-sub-label-container:last-child {

width: 4%;

margin-right: 0;

}

To fix the issue, you can either reapply the default theme of the form (in Version 4) so it will have the new default style and lose all the old default style OR you can use CSS codes (with !important declaration) to alter the current form's design just like what was instructed above. I would suggest you do the latter to avoid any conflict with the existing design of your form.

Also, we cannot replicate the issue on a newly created form since new forms will have the new default theme.

If you have other questions or concerns, please feel free to let us know.

Hi,

That appears to be the case and make a lot of sense. 

I have been using your forms for some time and do clone frequently.  I will keep this in mind and not use my forms to clone any longer but start from scratch to avoid V3 issues.

Many thanks for the clarification. Best Regards, Robert.