Last Updated: 26 Apr 2023 13:16 by ADMIN
Created by: Jan
Comments: 2
Type: Feature Request

We would like to use Kendo React to build a micro frontend UI but we did not found any relevant information that this is currently supported.

The main issue we are facing is how it isolate Kendo theme styling between different micro frontends.

Let's say we have 2 micro frontends A and B:

- A is using Kendo v6.

- B is using Kendo v7 (or some other future/past version).

Both of them will include their global Kendo styles which will collide.

After some investigation, we came up with 2 possible approaches:

  1. Isolating micro frontends using shadow DOM. This is the most common technique but unfortunately not supported by Kendo React yet.
  2. Prepend custom class to all Kendo CSS selectors (for example ".microfronend-a .k-button" instead of just ".k-button").

We have experimented with the second approach and it seems like a way to go. It also required to append all popups to root DOM node of a micro frontend which can be done easily using PopupPropsContext.

But adding a class to all Kendo CSS selector is technically not a trivial task. It would be nice if Kendo supported this out of the box, for example by providing some SCSS configuration variable.

Last Updated: 20 Apr 2023 04:12 by Ryan


I'm adding sass-loader to my webpack build so that I can keep up to date with the latest theme builds more easily. We simply use the default theme.

Webpack is giving me the following warning, however ...

WARNING in ./node_modules/@progress/kendo-theme-default/dist/all.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/@progress/kendo-theme-default/dist/all.scss) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0. Recommendation: math.div($a, $b) or calc($a / $b) More info and automated migrator: node_modules\@progress\kendo-theme-default\dist\all.scss 1039:15 k-math-div() node_modules\@progress\kendo-theme-default\dist\all.scss 4138:21 root stylesheet @ ./node_modules/@progress/kendo-theme-default/dist/all.scss 8:6-188 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-158 77:0-158 78:22-29 78:33-47 78:50-64 55:4-68:5 1 warning has detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

Last Updated: 19 Apr 2023 16:34 by ADMIN


Are there plans to improve 2.0.0 compatibility with kendo themes? math/calc should still be backwards compatible.

Last Updated: 04 Apr 2023 07:16 by ADMIN
Created by: Levi
Comments: 1
Type: Feature Request
When creating a custom build, it's highly impractical to trim down the theme css. The Less source breaks out common widget properties, but the primary themable file lumps all widgets together into a single massive file. It would be nice if this could be split apart further to trim out unused widget styles entirely.
Last Updated: 04 Apr 2023 07:08 by ADMIN
It would be nice if Theme variables would be separated into a different file, to make it possible to import those variables into your own site.less. 
This way colors etc can be re-used across the entire site.
Last Updated: 21 Feb 2022 07:25 by ADMIN

I made a repl to show the issue:

The 3 differently sized text area's render with almost the same size. Inspecting the elements, the textarea is wrapped in a span which is given a k-input-[sm/md/lg] class, and the text area is given minorly different padding for each. This works fine for TextBox, but not what you would expect from textarea.

I would expect textarea to render 1 line for sm, 2 lines for md, and 4 lines for lg, or something similar. The padding is a fairly useless difference here for a text area.

Last Updated: 25 Jan 2022 16:22 by ADMIN
Scheduled for 2021.3
Created by: Avrohom Yisroel
Comments: 0
Type: Bug Report

Adding the form-control class from bootstrap to a textarea causes worng appearance especially when I have autosize set to true.



Here is a workaround:

    span.k-textarea.form-control {
        border: 0;
        box-shadow: none;
        width: 100%;
        height: auto;

        span.k-textarea.form-control textarea {
            border: 1px solid rgb(206, 212, 218) !important;
            border-radius: 0.25rem !important;

<TelerikTextArea @bind-Value="@theValue" Class="form-control" AutoSize="true" />

@*<textarea class="form-control" @bind="theValue"></textarea>*@

    string theValue { get; set; } = "one\ntwo\nthree\nfour";


Last Updated: 25 Jan 2022 16:04 by ADMIN
Scheduled for 2021.2
I am using the material theme and when text is typed in the textarea the floating label does not flush to the top of the component but overlaps the text.
Last Updated: 28 Mar 2019 11:32 by ADMIN
Created by: Rumen
Comments: 4
Type: Feature Request
Let us know whether do you need Office 365-like skin?