This is a migrated thread and some comments may be shown as answers.

Bootstrap theme is not correct for readonly MaskedTextBox

3 Answers 12 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 22 Feb 2019, 09:48 PM
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.

3 Answers, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 26 Feb 2019, 09:05 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
James
Top achievements
Rank 1
answered on 27 Feb 2019, 08:36 PM

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.

 

0
Svet
Telerik team
answered on 01 Mar 2019, 08:16 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
James
Top achievements
Rank 1
Answers by
Svet
Telerik team
James
Top achievements
Rank 1
Share this question
or