Solved

want textarea height to grow if there is more text

Posted on 2013-05-23
3
357 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
3 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 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 250 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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 49
alert before form submission 6 40
Centered Image 2 27
A simple Float not working. 5 19
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

770 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