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

  • Profile Image
    Asked 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

    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.

  • Profile Image
    Answered 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:

  • Profile Image
    Answered on April 27, 2016 at 02:52 PM


    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
    Answered 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.