UI issue with Bootstrap 5.3 readonly form inputs

unibocconi-ltcc

Hi, I'm using Editor 2.2.2 (with license) , DT 1.13.6, Bootstrap 5.3.1, JQuery 3.7.0

This is how I configured the column

{
            label: "USER_ID_MOD:", name: "USER_ID_MOD", type: "readonly"
        }

This is how it appears, without the usual "disabled" UI. Luckly, the field is effectively read-only.

allan

It looks like that is how Bootstrap does readonly fields in 5.3.

You could do:

attr: {
  class: 'form-control-plaintext'
}

in your field definition if you wanted to use their form-control-plaintext class to make it look more like plain text. Or just use a little CSS to tweak it to suit your needs.

Allan

unibocconi-ltcc

Thank you, my fault not verifying on the BS documentation.

I've written this CSS rule to make them look as in BS5 and preventing focus on those inputs:

.form-control:read-only{
    background-color: #e9ecef;
    opacity: 1;
    transition: none;
    appearance: none;
    pointer-events: none;
}

allan

Its a funny one that. I wonder why they made that change. It used to be obvious visually as to when a field was read only.

Oh well, good to hear you have a solution.

Allan

unibocconi-ltcc

I agree with you. From an end user perspective disabled and read-only fields are the same. The only difference is for developers, who sometimes need to send that form value (readonly) or not (disabled).