Setting the DateTime Quick Tool to Read-only makes the year textbox shrink.

When i set the DateTime Quick tool to Read Only, the Year textbox shrinks. What up with that?

Also please respond to my post/question related to the FullName Quick Too issue.

Hi,

Can you try injecting this custom CSS code and see if it fix the issue?

#year_115 {

    width : initial;

}

To inject a custom CSS code, you can check the guide: How to Inject Custom CSS Codes.

Regarding your other thread, we will reply to you there, as soon as possible.

Do let us know if you need further assistance.

Regards.

Thanks  Chriistian

That appears to work although I had to adjust it to 55px to match the size of the other boxes, is that ok?

this should take care of any read only dates in the form, correct?

thanks again

Hello jonnavarra,

On behalf of my colleague, you are welcome. 

The custom css code shared by my colleague, is for specific date field "Draw Start Date".  If you want it to apply to your second date field "Projection Date", please inject the following custom css code:

#year_23 {

width : initial;

}

You may like to check the following guide on how to know the field id of any specific form field:  http://www.jotform.com/help/146-How-to-find-Field-IDs-Names 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Thanks, although I wish JotForm fix the issue rather than me have to inject all kinds of CSS everywhere.

I don't know if this is particular to my form but to me this appears to be an inherent fixable problem with the product... it shouldn't resize my field simply because I'm making is read-only. I'm sure this is not how it was designed, if it were (for whatever reason) it should have resized the month and day fields as well (for whatever reason).

Same goes with the other issue i posted re: Full Name. Adding the MiddleName, JotForm should automatically align the fields so I shouldn't have to inject additional CSS.

I hope you agree and attempt to have these "issues" fixed.

jon

Hi Jon,

Thank you for the confirmation that it was fixed on your jotform http://form.jotform.me/form/52413007967455 already.

And for providing more details about the cause if issue.

From what have investigated though, that styling issue of the DateTime field on your form seems to be happening on that form only. Its probably due to other style code/scripts that was present on the form. Even the Form Theme use by the form can influence it. 

So, using CSS code to overwrite the base style was the sure way to fix the style conflict.

If you will create a new form, you will see that the issue is not happening.

Hope this help. Please let us know how we can be of further assistance.

Regards,

Hi Jon,

The following rule will override whatever is causing the shrunken input issue and fix the appearance of all existing and future year inputs in read-only date fields, both in that form and others:

[readonly="readonly"][id^="year"] {
   min-width : 55px;
}

However, due to the cascading nature of CSS, in order for the rule to work correctly it should be placed at the end of the other CSS in the form and not at the beginning. (Upon cloning the latest version of your form, I noticed that the rule provided by my colleague was placed at the top of the injected CSS.) The simplest way to insert CSS in forms where the Form Designer was previously used is to go back into the Designer and add the code to the work area of the CSS tab. As such, please do the following:

1. Copy my rule above

2. Go into the Form Designer:

3. Click the CSS tab and paste the code into the work area:

4. Save the form:

The solution has been applied to this clone of your form. Notice how all of the year inputs of its read-only date fields are of the correct width.

If you would like clarification on anything, we'd be happy to explain it.

Thanks