How to Limit TextArea AutoSize and Show Scrollbar

Environment

Product

TextArea for Blazor

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.
2. Apply a max-height style and overflow-y: auto !important; to the textarea children of the CSS class from the previous step.

AutoSize TextArea up to a maximum height

<TelerikTextArea @bind-Value="@TextValue"
                 Width="500px"
                 ResizeMode="TextAreaResizeMode.Auto"
                 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;
}

Use AutoSize="true" instead of ResizeMode="TextAreaResizeMode.Auto" with Telerik UI for Blazor versions 6.x and earlier.

See Also

• TextArea Overview
• TextArea Appearance