Auto Save Text Area (Multiline asp: TextBox)

Question

I have a MultiLine asp: Textbox (standard html textarea for those people who are not asp) that I want to be automatic in order to match all the contents only via css. The reason for this is because I want it to be a given height in a scrollable web browser.

However, I have implemented a print style sheet and I want all the text located in the text area to be displayed when printing without hiding the overflow.

I can manually specify the height of the text field in the problem with the print.css file, since this field is optional, and an empty 350 pixel cell is not optimal, and there is always the possibility of more text than this ...

I tried using:

height: auto;
height: 100%;

In IE and Firefox, respectively, all of this seems to be overridden by the presence of a certain number of lines in the html markup for the form that should be generated by .NET when you don't specify the height on asp: The text tag seems to only take numerical dimensions like px em etc.

Any ideas?

Answer 1

What you request (css solution) is not possible.

The contents of the text field are not html elements, so it cannot be used by css to calculate the size of the text field.

, , - Javascript, . scrollHeight , . scrollHeight , .

Answer 2

jQuery javascript - , ,

( , , jQuery) - , , , .

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 3

, CSS .

Then in the print style sheet just set the height to auto. This can lead to some large empty space where all available lines are not filled, but at least all the text will be visible.

Answer 4

give jQuery autogrow () a go @

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