Resize text area based on content

Question

I am working on a project where I need to add boxes which contain lots of text on the google api in c#/javascript. The problem is that my textbox does not resize when i enter more text. I'm doing this with a text area. the only time it worked was when I put contenteditable in the html code. However, I can't type normaly in my textarea.

This is what I have at this moment. When the text is longer then the textarea, I get a scrollbar. I have looked at Autosizing textarea using Prototype but those sollutions did not work. Does anyone have a idea how I can solve this?

I work in the c# standard webbrowser so that means it is IE.

my code:

//begin css
.contextComment{
            height: auto;
            background:#ffffff;
            overflow:auto;
        }
        .textArea{
            margin-left: 2px;
            margin-top: 2px;
            display:inline-block;
            word-wrap: break-word;
            margin-bottom: 2px;
            position: relative;
            overflow-y:auto;           
        }
        textarea{
            border: none;
            border-color: transparent;
            height: 100%;
            overflow: hidden;
       }
//end css and start Javascript
function showCommentContextMenu(caurrentLatLng, indexPr) {
            var projection;
            contextmenuDir;
            projection = map.getProjection();
            $('.contextmenu').remove();
            contextmenuDir = document.createElement("div");
            contextmenuDir.className = 'contextmenu';

            contextmenuDir.innerHTML = "<div class='contextComment'><div class='textrea'><form action='' name='newTitleForm'><textarea type='text' onKeyPress='false' maxlength='1000' name='newTitle'>" + commentList[indexPr].text + "</textarea></div><div class='arrowImage'><input type='image' type='submit' alt='Verander de comment' onClick='changeComment(document.newTitleForm.newTitle.value, " + indexPr + ")' unselectable='on' src=" + arrow + "></form></div></div>";

            $(map.getDiv()).append(contextmenuDir);
            setMenuXY(caurrentLatLng);
            contextmenuDir.style.visibility = "visible";
        }

Answer 1

You can try this solution :

<script>
function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
}
</script>

All you have to do is call the function with passing your textarea

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Again, this solution come from here , i did not wrote it myself