Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 367
  • Last Modified:

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
0
rgb192
Asked:
rgb192
2 Solutions
 
COBOLdinosaurCommented:
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
 
soupBoyCommented:
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
 
rgb192Author Commented:
I used php dynamic code

but this javascript solution is very creative

thanks
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now