Question

I need to use a text-box (multiline) in my application. It need to grow as the user inputs text into it. I want that textbox to grow without any scrollbars. I tried allow=resize:null but it just prevents textbox from being stretched.All i want is a textbox as we see in facebook comment /share area which grows simply without any scrollbars on sides. I hope i have neatly explained it.

Answer 1

You can use something like this: (Source: Expandable or Auto-Resize TextBox Height by Colt Kwong)

    <asp:TextBox ID="txtMsg" runat="server"  TextMode="MultiLine" 
style="overflow:hidden" onkeyup="AutoExpand(this, event)" Rows="2" />

using this javascript:

    function AutoExpand(txtBox, event) 
{
    if (event.keyCode == "13" || event.keyCode == "8") {
        var therows = 0
        var thetext = document.getElementById(txtBox.id).value;
        var newtext = thetext.split("\n");
        therows += newtext.length

        document.getElementById(txtBox.id).rows = therows;
        return false;
    }
}

Or if you like jquery you should take a look at the jQuery autoResize Plugin.

A plugin for jQuery which changes the dimensions of input elements to
suit the amount of data entered. It operates on textarea,
input[type=text] and input[type=password] elements.

Usage is as follows:

$('textarea#foo').autoResize();

You can pass options:

$('textarea#foo').autoResize({
    maxHeight: 200,
    minHeight: 100
});