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