Autosize Text Area (Multiline asp:TextBox)

Question

I have a MultiLine asp:Textbox (a standard html textarea for those non-asp people) that I want to be auto-sized to fit all it's content only through css. The reason for this is that I want it to be of a specified height in the web browser, with scrolling enabled.

I have implemented a print style sheet however and want all text located in the textarea to be displayed when printed with no overflow hidden.

I can manually specify the height of the textarea in the print.css file problem with this being that the fields are optional and a 350px blank box is not optimal and there is always the possibility of a larger amount of text than this...

I have tried using :

height: auto;
height: 100%;

In IE and Firefox respectively yet these seem to be overridden by the presence of a specified number of rows in the html mark-up for the form which must be generated by .NET when you do not specify a height on the asp:Textbox tag, this seems to only accept numercial measurements such as px em etc...

Any ideas?

Answer 1

jQuery or a javascript function to find and make textboxes bigger might be the best solution - at least thats what i found

we use this set of functions and call clean form after the page is loaded (i know this isnt the best solution right here and am working to transfer to a jQuery solution that is more elegant) - one note make sure your textareas have rows and cols specified or it doesnt work right.

function countLines(strtocount, cols)
{ 
    var hard_lines = 1; 
    var last = 0; 
    while (true) 
    { 
        last = strtocount.indexOf("\n", last + 1); 
        hard_lines++; 
        if (last == -1) break; 
    } 
    var soft_lines = Math.round(strtocount.length / (cols - 1)); 
    var hard = eval("hard_lines  " + unescape("%3e") + "soft_lines;"); 
    if (hard) soft_lines = hard_lines; return soft_lines; 
}

function cleanForm() 
{
    var the_form = document.forms[0];
    for (var i = 0, il = the_form.length; i < il; i++)
    { 
        if (!the_form[i]) continue; 
        if (typeof the_form[i].rows != "number") continue;
        the_form[i].rows = countLines(the_form[i].value, the_form[i].cols) + 1; 
    }    
    setTimeout("cleanForm();", 3000);
}

Answer 2

What you are asking for (a css solution) is not possible.

The content of the textarea is not html elements, so it can not be used by css to calculate the size of the textarea.

The only thing that could work would be Javascript, e.g. reading the scrollHeight property and use that to set the height of the element. Still the scrollHeight property is non-standard, so it might not work in all browsers.

Answer 3

If you set rows to be a ridiculously high number the CSS height rule should override it on the screen.

Then in the print stylesheet just set height to auto. This might result in some big blank space where all the available rows haven't been filled up, but at least all text will be visible.

Answer 4

give jQuery's autogrow() a go @

http://plugins.jquery.com/project/autogrow