Input controls do not override button's border radius

Progress® Kendo UI® for jQuery Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Need More Info

Last Updated: 27 Jul 2022 06:43 by ADMIN

Michael D

Created on: 14 Jun 2022 06:26

Category: Kendo UI for jQuery

Type: Bug Report

Input controls do not override button's border radius

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.

5 comments

ADMIN

Martin

Posted on: 27 Jul 2022 06:43

Hello, Michael,

Thanks again for your feedback on the matter. I will pass it along to the team.

Regards,
Martin
Progress Telerik

The Premier Dev Conference is back!

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.

Michael D

Posted on: 20 Jul 2022 06:58

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)

ADMIN

Martin

Posted on: 28 Jun 2022 12:08

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/.

Michael D

Posted on: 21 Jun 2022 12:23

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.

ADMIN

Martin

Posted on: 20 Jun 2022 12:40

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.