TextArea size

timstring

Is there a way to size a text area relative to the window width? Rows and columns only work well with a fixed screen-width.

bradgrafelman

You can use CSS to set the "width" property equal to a percentage of the container of the textarea. Otherwise, you'd probably have to use Javascript to determine the "window width" (and then similarly set the 'width' attribute equal to whatever ratio of that value you desire).

johanafm

bradgrafelman;11018775 wrote:
You can use CSS to set the "width"

I'd like to rephrase that as you should use CSS to set the width property. But wether it's actually possible to set the textrarea width relative to the window depends entirely on the width of the containing elements. That is, unless you use javascript to compute the window width and then resize the textarea. But then you had better go on and resize all of its parent elements up the chain, which means you might just as well have set them to relative sizes to begin with.

jeepin81

Another CSS based option is to use the media attribute and do something like:

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">

Then set a different size in the #id of the input box in each CSS file that has a media attribute. That way you will have responsive design elements based on the viewport. I have not tested this in IE.

Ashley_Sheridan

CSS media queries do not work in IE (not sure about IE10, but virtually nobody has that anyway).

Bonesnap

One thing to note about setting the dimensions of a textarea via CSS: for the HTML to validate properly I believe the attributes rows and cols still need to be present and have a value.

Ashley Sheridan;11019901 wrote:
CSS media queries do not work in IE (not sure about IE10, but virtually nobody has that anyway).

I believe support was added in IE9.

Also I'm pretty sure IE supports the @media rule within style sheets.

Ashley_Sheridan

Bonesnap;11019919 wrote:
One thing to note about setting the dimensions of a textarea via CSS: for the HTML to validate properly I believe the attributes rows and cols still need to be present and have a value.

They are required in HTML4, but they are optional in HTML5, defaulting to 20×2 if unspecified.

Bonesnap;11019919 wrote:
I believe support was added in IE9.

I stand corrected, I hadn't realised IE9 had implemented this.