Link to home
Start Free TrialLog in
Avatar of Keys916
Keys916

asked on

Expandable textarea

Hi,

   I am trying to create a textarea that gets data from a db and expands to accomodate the data without scrolling, but still wrapping the text so that all is visible on the screen at the same time.  The page works well as far as the data retrieval goes, but I have tried several different CSS tags, as well as standard stuff, and I cannot make this work.  I am only concerned with IE 5.5+ compatability.  The server language is ColdFusion.

Thanks!
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

A textarea does not size to content and there in no property or attribute that will change that.  If the content does not need to be modified then use a dive ro present it and it will size to content.  If the user must be able to modify the content and you do not have security concerns then a contenteditable div might be and option:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/contenteditable.asp

Cd&
Avatar of nan1217
nan1217

Text boxes can be expanded but not textareas.  Try this - http://www.flws.com.au/showusyourcode/codeLib/code/dynamicLength.asp?catID=2
This is the closest you can get.  Sizes width to the size of your window, set the height to what you want.
Text wrap is set to virtual, meaning the wrap displays on the screen but the line breaks are not inserted in the data.


<html>
<body>

<textarea rows="" cols="" style="width: 100%; height: 30em;" wrap="virtual">
Lorem ipsum dolor sit amet, wisi posuere aliquam ligula enim venenatis. Hymenaeos est eros fermentum. Sed cursus id sem. Class ac tristique ac fusce at facilisi. Faucibus inceptos. Laoreet ultricies eros in nonummy eu quis. Augue mus.
Praesent, nibh placerat. Rutrum cras nonummy sagittis luctus pharetra, augue in cubilia in sagittis nostra integer duis molestie penatibus. Vel hendrerit accumsan magnis lectus. Felis, eu euismod a ipsum. Morbi nonummy. Etiam pede ipsum justo aliquet. Leo justo nam.
Platea aptent imperdiet posuere mus senectus et erat cras mus montes cubilia venenatis mollis urna mattis. Molestie ipsum cum vehicula sociis dignissim cubilia suscipit odio nam ipsum purus netus condimentum scelerisque vestibulum. Sagittis augue. Nunc cum at, nibh phasellus. Senectus magnis. Orci natoque arcu sociis potenti. Et feugiat.
Lacus, ac semper. Nonummy felis vestibulum. Congue non molestie, sapien nibh. Augue erat sollicitudin praesent senectus. Molestie sit. Curabitur duis pede, netus egestas lorem. Auctor cras.
</textarea>

</body>
</html>
Maybe I misunderstand, but is this what you're looking for?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>new document</title>

<script language="javascript" type="text/javascript">
<!--
function expandTA() {
    var ta = document.forms['the_form'].elements['ta'];
    var l = ta.value.split('\n').length;
    ta.rows = l > ta.rows ? l : ta.rows;
}
-->
</script>

</head>

<body>

<form name="the_form">
  <textarea name="ta" rows="5" cols="50" onkeyup="expandTA();" wrap="off"></textarea>
</form>

</body>

</html>
Avatar of Keys916

ASKER

Hi All,

    The link Nan1217 posted leads to the right idea -- however, I'm not too well-versed in JavaScript.  I want the textarea yo resize immediately upon the page loading, rather than when someone clicks in it -- is there a way to do this?

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of cLFlaVA
cLFlaVA

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I had a similar situation, but  I need it to resize the textarea to the width of the browser. I did this in a PHP file using javascript. You can adapt to another script language.

echo "<script language=\"JavaScript\">";
echo "height = document.body.offsetHeight, width = document.body.offsetWidth;"; // IE width and Height
echo "width2 = Math.floor(width/10);";
echo "document.writeln('<textarea cols=\"'+width2+'\" rows=\"20\" name=texto id=\"textarea1\" wrap=\"soft\" id=\"textarea1\">');";
echo "</script>$texto</textarea>";

If yow know the number of chars in the text and you mantain constant your width, you can determine the number of rows that your textbox needs for displaying all your text.

Hope this works