RadTextBox to increase in height as user types

2 posts, 0 answers
  1. Shane Clay
    Shane Clay avatar
    29 posts
    Member since:
    May 2010

    Posted 03 Jul 2015 Link to this post

    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?

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 07 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top