Hi, Michael,

I apologize, however I do not see this is a valid request, at least as far as I can understand it.

The following statement is not correct in my opinion(unless we are talking about breaking the functionality itself, not the styling):

If some global styling may break a widget, the widget must prevent that itself

If a developer wishes to set a certain style, to a certain element, the style must be applied. Dismissing styles applied by the developer would be a bad practice as there will be no way to tell who expects what result. If applying a custom style leads to some undesired visual effect then it is the job of the developer to remedy the problem and update the appearance to their liking.

The NumericTextBox functions normally with or without the rounding:

https://dojo.telerik.com/@gdenchev/ecAwOREt 

As I mentioned in my previous reply, if the goal is to apply rounding to all buttons except the spinners, then the selectors must be updated.

Best Regards,
Georgi Denchev
Progress Telerik

Hi, Michael,

Just to summarize what has been said so far, the main issue behind this thread is that there is no built-in way to change the more granular elements of a component, is that correct?

For example the numerictextbox consists of an input and two buttons. The `rounded` style is applied to the component as a whole, not to its individual parts.

More granular styles have to be applied manually as there is no way to cover all cases for all widgets.

Taking the numerictexbox as an example, if we want to change the spinner buttons without affecting any other button in the application, then we would target their respective classes:

.k-spinner-increase,.k-spinner-decrease {
border-radius: 10px;
}

If we want to target every single button in a particular component, then again, we would use the appropriate selectors:

/* k-grid, .k-numerictextbox, k-dropdownlist, etc. */
.k-widgetname .k-button {
 border-radius: 10px;
}

If we want to target all buttons, except the ones in the numeric:

      .k-button:not(.k-spinner-increase,.k-spinner-decrease) {
        border-radius: 10px;
      }

The possibilities are countless and they can vary depending on the needs of the application/design. That is why the more optimal way would be to use customized CSS.

If every single case was covered in the component options, then the object will probably reach hundreds of lines of code just for its styling. This is something that should be handled in the themes themselves, either by modifying the existing Kendo SASS themes or with plain CSS.

Let me know in case I misunderstood the report.

Best Regards,
Georgi Denchev
Progress Telerik

Hello, Michael,

If there were no actions after our last discussion on the matter in later releases, our front-end team have decided that no changes are required. Still, if you think that the thread should be reviewed, kindly summarize all the information that would be useful for our front-ends. If the issue can be demonstrated in a Dojo example, that should ease their work.

Thank you in advance for your cooperation. Looking forward to your reply.

Regards,
Martin
Progress Telerik

Hello, Michael,

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

Regards,
Martin
Progress Telerik

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

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