Bootstrap theme is not correct for readonly MaskedTextBox

[James]

The bootstrap theme should give input boxes a light gray color for readonly inputs but for the MaskedTextBox the input box is still displayed as white.

[Svet]

Hi James,

Indeed, the reported appearance is by design. This is how a default readonly input appears. Check the following example demonstrating a Kendo Ui for Angular masked input and a default HTML input:
https://stackblitz.com/edit/angular-k2jvmg?file=app%2Fapp.component.ts

We could overwrite the default kendo styles in order to achieve the desired behavior as demonstrated in the following example:
https://stackblitz.com/edit/angular-xbq1qt?file=app%2Fapp.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[James]

Hi Svetlin,

    Thanks for the reply.  I understand that is currently what it is doing, but my issue was the fact that this does not follow the Bootstrap theme.  When using Bootstrap the default should be to gray out the input box as that is how Bootstrap styles for readonly fields.

https://getbootstrap.com/docs/4.0/components/forms/#readonly

I do understand it is easy to override the CSS, which I will do because I want the application to be consistent with Bootstrap theme.  It just seems like the kendo bootstrap theme should already do this by default instead of the manual override.

Thanks.

 

[Svet]

Hi James,

Thank you for the additional details.

The input demonstrated from the referenced Bootstrap documentation has a background color because of the applied form-control CSS class:

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Adding the same class to a Kendo Ui for Angular Input yields the same behavior:
https://stackblitz.com/edit/angular-k2jvmg-9kxxgz?file=app%2Fapp.component.ts

I hope this clears the picture. Let me know in case additional information is needed for this case.

Regards,
Svetlin
Progress Telerik