Merge textarea-maxheight-1854 into production

components/textarea/overview.md

@@ -53,7 +53,7 @@ The Blazor TextArea provides various parameters to configure the component:
 | ----------- | ----------- | ----------- |
 | `AutoCapitalize` | `string` | A `string` that maps to the [`autocapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize) attribute of the HTML element. It's applicable only for touch devices and virtual keyboards. |
 | `AutoComplete` | `bool` | Maps to the autocomplete attribute of the HTML `<textarea>`. |
-| `AutoSize` | `bool` | Specifies if the TextArea will adjust its height based on the user input. |
+| `AutoSize` | `bool` | Specifies if the TextArea will adjust its height based on the user input. You can [use CSS to limit the resizing up to a max height]({%slug textarea-kb-autosize-max-height%}). |
 | `Class` | `string` | The custom CSS class to be rendered on the `<span class="k-textarea">` element. |
 | `Cols` | `int?` | Maps to the `cols` attribute of the HTML `<textarea>` element. Do not use together with `Width`.
 | `DebounceDelay` | `int` | Specifies the time in milliseconds between the last typed symbol and the updating of the value. The default value is 150ms. |

knowledge-base/textarea-autosize-max-height.md

@@ -0,0 +1,63 @@
+---
+title: How to Limit TextArea AutoSize and Show Scrollbar
+description: Limit the TextArea automatic resizing and display a vertical scrollbar once a set max height is reached.
+type: how-to
+page_title: How to limit TextArea AutoSize and show scrollbar beyond a max height
+slug: textarea-kb-autosize-max-height
+position: 
+tags: telerik, blazor, textarea, autosize, css
+ticketid: 1636831
+res_type: kb
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>TextArea for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+This KB article answers the following questions:
+
+* How to limit the TextArea auto size area and have a scrollbar when the component needs to expand more.
+* How to use the TextArea's `AutoSize` up to a point, and have a vertical scrollbar if the text grows beyond that.
+* How to make the `TelerikTextArea` show a scrollbar if a max height is hit.
+
+
+## Solution
+
+1. Set a [`Class` to the TextArea]({%slug textarea-overview%}#textarea-parameters).
+1. Apply a `max-height` style and `overflow-y: auto !important;` to the `textarea` children of the CSS class from the previous step.
+
+>caption AutoSize TextArea up to a maximum height
+
+````CSHTML
+<TelerikTextArea @bind-Value="@TextValue"
+                 Width="500px"
+                 AutoSize="true"
+                 Class="max-height-200" />
+
+<style>
+    .max-height-200 > textarea {
+        max-height: 200px;
+        overflow-y: auto !important;
+    }
+</style>
+
+@code {
+    private string TextValue { get; set; } = string.Empty;
+}
+````
+
+
+## See Also
+
+* [TextArea Overview]({%slug textarea-overview%})
+* [TextArea Appearace]({%slug TextArea-appearance%})