Textarea sizing

Andrew Poulos · Jul 25, 2007

How can I set a textarea to be as tall as its container allows i.e. to
be 100% high? (The container is liquid.) I've tried CSS but to no avail
so I'm hoping there's a way to script it.

Andrew Poulos

David Mark · Jul 25, 2007

How can I set a textarea to be as tall as its container allows i.e. to
be 100% high? (The container is liquid.) I've tried CSS but to no avail
so I'm hoping there's a way to script it.

Andrew Poulos

If the markup looks something like this:

<div style="border:solid 1px;position:relative;height:50%">
<textarea id="edit" style="border:none;position:absolute;top:0;margin:
0"></textarea>
</div>

Then the script looks like this:

function windowSize() {
var el = document.getElementById('edit');
if (el) {
var c = el.parentNode;
if (c && typeof(c.offsetHeight) != 'undefined' && c.offsetHeight >
1)
el.style.height = (c.offsetHeight - 2) + 'px' // adjusted for 1px
border on container
}
}

if (document.getElementById) {
window.onresize = windowSize;
window.onload = windowSize;
}

If you change the border widths of either element or the top and/or
margin of the textarea, you will have to change the commented line in
the script to compensate.

Tested in IE6/7, Opera 9, the latest Firefox and Netscape, Netscape
6.2 and the Windows Safari Beta.

David Mark · Jul 26, 2007

You're kidding right?

If you properly set a container via static or dynamic measurements, your
child can adopt those same parameters.

<?xml version="1.0" encoding="utf-8"?>

I didn't try this example in IE6, but if anyone does, they need to
remove this prolog as it will force quirks mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-
8;" />
<style type="text/css" media="screen">
#container
{
border: 3px double #ccc;
padding: 0 2em 4em;
width: 600px;
height: 600px;

This container isn't elastic.

}
#container textarea
{
width: 98%;
height: 98%;

Why not 100% as requested?

}
</style>
</head>

<body>

<div id="container">
<p>Just some text to give us perspective.</p>

<textarea rows="6" cols="40"></textarea>
</div>

This doesn't work at all in IE7 or Windows Safari (they show a six row
textarea.) And I am sure this method will not be pixel-perfect in any
browser, regardless of the desired percentage.

</body>
</html>

Definitely not a JavaScript problem. Unless of course you are doing
some major weird shite, and must reset values in JavaScript.

A 100% textarea inside an elastic container may be considered weird
for most Web pages; but, in any case, it cannot be done with CSS
alone.

Problems with using event handlers for button and textarea input	1	Nov 29, 2021
Survey details won't go through using php, ajax, Mysql	2	Oct 26, 2023
Hey can anyone tell me why input data wont save in my database?	0	Jun 16, 2024
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Need help with code on website (noob)	2	Jul 18, 2022
Im having trouble containing a title an image and a button	2	Oct 26, 2022
Textarea and valid HTML	8	Feb 13, 2007
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022

Textarea sizing

Andrew Poulos

David Mark

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads