?
Solved

want textarea height to grow if there is more text

Posted on 2013-05-23
3
Medium Priority
?
365 Views
Last Modified: 2013-05-28
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
Comment
Question by:rgb192
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 1000 total points
ID: 39194718
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
 
LVL 8

Accepted Solution

by:
soupBoy earned 1000 total points
ID: 39195132
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
 

Author Closing Comment

by:rgb192
ID: 39203026
I used php dynamic code

but this javascript solution is very creative

thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question