RadTextBox to increase in height as user types

[Shane Clay]

Has anyone found a way to increase a multiline radtextbox automatically as a user types so that if can fit their input vertically?

We'd like to put the text box on the page with a base height of 100px. However, once the user has filled that space and keeps typing, instead of the text box getting scrollbars, we want it to add enough pixels to keep all the text visible. 

This would need to occur up to a "max height" at which point the normal scroll bar behaviour would kick in...

Any thoughts?

[Viktor Tachev]

Hi Shane,

In order to resize the RadTextBox height you can use the following approach.

Markup:

<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine" Height="100px">
    <ClientEvents  OnValueChanged="setHeight" />
</telerik:RadTextBox>

JavaScript:

function setHeight(sender, args) {
    window.setTimeout(function () {
        sender._textBoxElement.style.height = "";
        window.setTimeout(function () {
            if (sender._textBoxElement.scrollHeight < 250) {
                sender._textBoxElement.style.height = sender._textBoxElement.scrollHeight + 5 + "px";
                sender._originalTextBoxCssText += "height: " + sender._textBoxElement.style.height + ";";
            } else {
                sender._textBoxElement.style.height = "250px";
                sender._originalTextBoxCssText += "height: 250px;";
            }

        }, 1);
    }, 1);
}

Note that the sample will resize the RadTextBox up to 250 pixels. If the text is longer there will be scroll displayed. You would probably need to fine tune the code a bit in order to fit your specific scenario.

Regards,
Viktor Tachev
Telerik