I have a fluid layout and i need a textarea to expand/reduce depending of the size of the parent container.

In CSS it would look like this:

textarea{
width: 100%;
}

But this doesn´t work with textareas.

How can I do this with javascript? I can get the parent element width and them calculate the number of cols to fit that width but how do I know the size of 1 col (in px)?

I have a fluid layout and i need a textarea to expand/reduce depending of the size of the parent container.

In CSS it would look like this:

textarea{
width: 100%;
}

But this doesn´t work with textareas.

How can I do this with javascript? I can get the parent element width and them calculate the number of cols to fit that width but how do I know the size of 1 col (in px)?

• javascript
• layout
• textarea
• resizable
• fluid

2 Answers 2

chk this out : http://css-tricks./box-sizing/

  textarea {
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
             box-sizing: border-box;         /* Opera/IE 8+ */
           }

It's 2014, and width: 100%; now works with textareas in current versions of Chrome, Firefox, IE, Opera, and Safari.