What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    The year input in the DateTime field shrinks when setting up the field as read-only

    Asked by EuanAitken on April 27, 2016 at 12:35 PM

    I made those changes and it now works, however I now have a new issue.

    In the second form https://form.jotformeu.com/61033629991359

    I amended the date field called "qd" to a read only date field. When I do, the year box, shrinks and is no longer legible.

    When I set read only to "no" it returns to it's full size.

     

    Please could you advise.

    datetime field year input
  • Profile Image
    JotForm Support

    Answered by Welvin on April 27, 2016 at 12:56 PM

    You can fix it by injecting the following custom CSS codes in the form:

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

        width: 36%;

    }

    Here's our guide for injecting a custom CSS: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by EuanAitken on April 27, 2016 at 02:52 PM

    Hi,

    Thanks for the tip.

    Why do I need to do that?

    The date field works when it is not read only, it only changes when I switch it to read only - is this a bug?

  • Profile Image
    JotForm Support

    Answered by Welvin on April 27, 2016 at 03:52 PM

    I cannot replicate it so I think this is just specific to your form, probably because of how it's styled in the designer. But the reason is that the container of the calendar icon has a 4% width only. If you set it to read-only, the icon will disappear and the CSS will target the year input which replaces the icon as the last element or child of the field. 

    Is this an old form? Checking its source, it seems so but I need to know. The CSS above, you can find it in the form source.

    I find it no way to remove this line of CSS so I'd suggest overriding it with the given codes with bigger width value.