want textarea height to grow if there is more text

I need the textarea width to fit in the div

      <div style="width:17%;border-width:1px;border-color:blue;border-style:dashed;float:left;word-wrap: break-word;"><textarea name="client_description[1354328336]" style="width:100%; height:100px;"></textarea>
</div>

Open in new window



want textarea height to grow if there is more text in textarea
because it is difficult to use scrollbar
LVL 1
rgb192Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
soupBoyConnect With a Mentor Commented:
You can do this with a little bit of creativity and a little bit of javascript.  You would want to have a div styled to look like a textarea and give it the 'contenteditable' attribute.  Then, on keyup, copy the value to a hidden field that way you can capture the value on form submit.

Here is an example (I didn't use a hidden form field, that way you can see the javascript copying correctly): Fake Textarea using Contenteditable and javascript

Here is the code...
HTML:
<input type="text" id="fauxTextValue"></input>
<div id="fauxTextarea" contenteditable></div>

Open in new window

CSS:
#fauxTextarea{
    width: 200px;
    min-height: 50px;
    border: 1px solid #999;
}

Open in new window

Javascript:
var fauxTextarea = document.getElementById("fauxTextarea");
var fauxTextValue = document.getElementById("fauxTextValue");

fauxTextarea.onkeyup = function(){
 fauxTextValue.value = this.childNodes[0].nodeValue;  
}

Open in new window

0
 
COBOLdinosaurConnect With a Mentor Commented:
The design of a textarea does not include the dynamic you want.  The scroll bars are part of the design specification.  The rows attribute set a static value.  If you need it to grow then you will need a bunch of scripting to detect that its is full so you can modify the rows attribute and demonstrate a behavior that will convince the user you have a broken page.

Cd&
0
 
rgb192Author Commented:
I used php dynamic code

but this javascript solution is very creative

thanks
0
All Courses

From novice to tech pro — start learning today.