Hi,
Disabled KendoReact Bootstrap theme inputs have a very different appearance to HTML Bootstrap inputs when disabled. Bootstrap inputs have a greyed out appearance (https://getbootstrap.com/docs/5.0/forms/form-control/#disabled) whereas the opacity only changes for KendoReact inputs (https://www.telerik.com/kendo-react-ui/components/inputs/textbox/disabled/).
Is there a reason why the styles are different? Is there anything we can do to make a disabled KendoReact input look like a disabled Bootstrap input?
Kind regards,
David
1 Answer, 1 is accepted
Hello, David,
You can customize the Textbox CSS styles to make them match the Bootstrap input. The disabled prop adds a `.k-disabled` class to the Textbox and you can override it to change the opacity, and use it to change the color and background color of `.k-input-inner`:
Regarding the relationship between Bootstrap and `kendo-themes-bootstrap`, as explained by my colleague Ivan here, `kendo-themes-bootstrap` is not identical to Bootstrap but rather inspired by it. This was done because of the multiple differences between the two.
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.