Solved

want textarea height to grow if there is more text

Posted on 2013-05-23
3
349 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now