Hello,
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: https://sass-lang.com/d/slash-div 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.
I made a repl to show the issue: https://blazorrepl.telerik.com/GcaGvdaw31AartTh17
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.
Adding the form-control class from bootstrap to a textarea causes worng appearance especially when I have autosize set to true.
---
ADMIN EDIT
Here is a workaround:
<style>
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;
}
</style>
<TelerikTextArea @bind-Value="@theValue" Class="form-control" AutoSize="true" />
@*<textarea class="form-control" @bind="theValue"></textarea>*@
@code{
string theValue { get; set; } = "one\ntwo\nthree\nfour";
}---
