Hi,
We use a mix of standard HTML inputs and KendoReact controls in forms in our application. Using v4.10.0 of kendo-react control and kendo-theme-bootstrap packages, we were able to apply the Bootstrap form-control class to both standard HTML inputs and KendoReact controls with no issues. We were also able to apply the Bootstrap is-invalid class for custom validation requirements, again with no issues.
After upgrading to v5 of bootstrap, kendo-react control and kendo-theme-bootstrap packages, the form-control class breaks the appearance of KendoReact controls. Please see the following example modified from the KendoReact ComboBox Overview so that package versions can be easily modified.
https://stackblitz.com/edit/react-mintjh?file=app/main.tsx
I have left the package at their v4 versions that we were using without issue. If you bump all the kendo-react control, kendo-theme-bootstrap and bootstrap packages to the latest v5 versions in package.json you can see that the controls no longer render properly.
We are committed to the Bootstrap form layout, and we have more standard HTML inputs than KendoReact controls. Can you please suggest classes we can use as equivalents to form-control and is-invalid for the KendoReact controls we use in our forms? Or some other recommended way of using KendoReact controls in HTML forms using Bootstrap styling and custom validation? I can't find any clear documentation on it.
Kind regards,
David
1 Answer, 1 is accepted
Hi, David,
This behavior occurs because we have overridden the padding and display of our components.
From version 5, the Bootstrap form-control class applies its own styles for padding and display, which breaks our components, because it uses a stronger CSS selector.
A possible solution that will fix the layout would be to use the two utility classes: k-py-0 k-pl-0 k-display-inline-flex . They remove the top, bottom, and left padding and change the display to flex, instead of block, which comes from Bootstrap.
Here is a demo that showcases this approach:
I hope this helps.
Regards,
FilipProgress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.