In the latest version of Kendo UI, various input controls like the NumericTextBox or the ColorPicker now consist of an input field and a button control (used for increasing/decreasing the value or opening the dropdown).
The border-radius for those widgets can be controlled by setting the "rounded" option. At the same time, when using SASS themes, a button's default border-radius might be set using the $kendo-button-border-radius variable. The buttons inside e.g. a NumericTextBox do not override the theme's border-radius which leads to an outcome like this:
Widgets that use Buttons internally (and therefore offer no way of overriding the button's border-radius by setting its "rounded" option manually) should override the default styles.
Unfortunately, I could not reproduce the behavior in a DOJO, because I cannot transpile SASS themes there.
Hello, Michael,
Thanks again for your feedback on the matter. I will pass it along to the team.
Regards,
Martin
Progress Telerik
Hi Martin!
Sorry for the late reply.
I fully understand your concerns regarding the reusability and maintainability of widgets. However, if a widget like the NumericTextBox uses a widget like the button, the NumericTextBox is responsible for handling the button and not anything that wraps the two of them - the wrapper should not even know that there's a button to deal with in the first place.
This principle should not only be applied for behavior, but also for the appearance of widgets. In other words: It should not matter if settings come via a JS configuration option or a SASS variable. Buttons can be styled via the $kendo-button-border-radius variable and the NumericTextBox has to deal with it. If it cannot prevent rounded corners via configuration, it has to disable them in CSS.
I am not saying that the solution you suggested is wrong, but rather that it should be part of the NumericTextBox widget and the NumericTextBox widget only.
Maybe a last addition: At least in version 2022.2.510, .k-button applies the border-radius regardless of the presence of a .k-rounded class (see ./scss/button/_layout.scss)
Hello, Michael,
The k-button class is the base class for the Button and there is no way for us to ignore it when integrating the Button in other widgets. We are re-using the styles in order to achieve effectiveness and better maintenance. When it comes to styling the Kendo widgets, one must keep in mind the child components used and that global styles are expected to affect them. When custom CSS rules should be applied, we normally leave it up to the developers to take care for such cases due to the specifics of their requirement.
I hope that clears things up. Let me know if you have any further questions.
Regards,
Martin
Progress 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/.
Thank you for your solution. This is the way we are currently fixing the problem. However, this means that a developer using a widget - in the previous example the NumericTextBox - has to know about its internals - the buttons - and how to style them.
Since the way a NumericTextBox is built and the elements it consists of may change, this fix may easily break with a future update. Also, we have no control over the internals of a widget, so only the widget itself should manipulate them (Open/Closed Principle).
Also, there is no situation where a NumericTextBox should look like in the provided image - no matter if it has rounded corners or not. This is why (in my opinion) the described behavior is a bug of the NumericTextBox widget.
Hello, Michael,
If you wish to avoid setting a custom border-radius for the buttons in the NumericTextBox widget, you can use the CSS below.
.k-rounded-md .k-button,
.k-rounded-sm .k-button,
.k-rounded-lg .k-button {
border-radius: 0px;
}
Here is a small example for reference. You can see that the k-button rule will set a custom border radius for the buttons, but the rules applied for the .k-rounded-{size} .k-button selector will prevent the 10px border radius applying for the inner NumericTextBox buttons.
Let me know if that would resolve the issue, or if I am missing something.
Regards,
Martin
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.