Rectangle 27 43

<div>
<div style="width:20%; float:left;">
 <p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
 <textarea style="width:100%;"></textarea>
</div>
<div style="clear:both;"></div>
</div>

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 42

<div>
<div style="width:20%; float:left;">
 <p>Some Contentsssssssssss</p>
</div>
<div style="float:left;width:80%;">
 <textarea style="width:100%;"></textarea>
</div>
<div style="clear:both;"></div>
</div>

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 187

I recommend to use both. Rows and cols are required and useful if the client does not support CSS. But as a designer I overwrite them to get exactly the size I wish.

The recommended way to do it is via an external stylesheet e.g.

textarea {
  width: 300px;
  height: 150px;
}
<textarea> </textarea>

This is okay, but you have to realize that whatever arbitrary space you are setting the size with is going to waste and is really just for show.

rows/cols is based on the character size of the user. So if you have a css-defined width/height that cannot be divided by the pixles of a character in the textarea, there is going to be that much whitepsace left over vertically and horizontally. Probably no one will ever notice, but just sayin.

You could use "em" as measurement, instead of pixels. 1em is the width of the "M" in any font and size. But cols are only relevant if used with monospace fonts, which is in most designs not the case. To get a perfect fitting in height use a multiple of line-height for the height of your textarea.

@LeoGalleguillos Required and useful if the client does not support CSS. Nobody said anything about validation.

Should I size a textarea with CSS width / height or HTML cols / rows a...

html css textarea
Rectangle 27 585

Why not? Forget the hacks and just do it with CSS?

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

I can't believe this worked. But it did. CSS is never this easy. :-)

This has got to be one of the coolest things I have found in a while. Thank you, any chance there is a way to do this in IE7 as well?

Note that you'll still want to use width:100% in conjunction with the border-box.

Doesn't old versions of Internet Explorer use border-box behavior only?

This is fantastic... even after all these years, still learn something new every day. @koolaang this is basically saying the object's size shouldn't factor in padding, so in theory you can apply this style right to the textarea itself.

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 581

Why not? Forget the hacks and just do it with CSS?

.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

I can't believe this worked. But it did. CSS is never this easy. :-)

This has got to be one of the coolest things I have found in a while. Thank you, any chance there is a way to do this in IE7 as well?

Note that you'll still want to use width:100% in conjunction with the border-box.

Doesn't old versions of Internet Explorer use border-box behavior only?

This is fantastic... even after all these years, still learn something new every day. @koolaang this is basically saying the object's size shouldn't factor in padding, so in theory you can apply this style right to the textarea itself.

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 69

So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

I ended up moving away from using % widths. I believe your approach would work just as well though. Thanks!

@Chris: Thanks and fixed. I'm mildly surprised that it took almost a year and a half for someone to catch that...

In chrome, when you focus textarea element it's gets hightlighted automatically and if you create padding for div wrapper, this padding will be visible and two borders will be visible because of that. One from hightlighting and another from .textwrapper border:1px solid #999999;

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 69

So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):

textarea
{
  width:100%;
}
.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
  <label for="rules" id="ruleslabel">Rules:</label>
  <div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>

I ended up moving away from using % widths. I believe your approach would work just as well though. Thanks!

@Chris: Thanks and fixed. I'm mildly surprised that it took almost a year and a half for someone to catch that...

In chrome, when you focus textarea element it's gets hightlighted automatically and if you create padding for div wrapper, this padding will be visible and two borders will be visible because of that. One from hightlighting and another from .textwrapper border:1px solid #999999;

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 6

You need to define width of the div containing the textarea and when you declare textarea, you can then set .main > textarea to have width: inherit.

.main > textarea
<textarea>
class="main"
<div class="wrapper">
  <div class="left">left</div>
  <div class="main">
    <textarea name="" cols="" rows=""></textarea>
  </div>
</div>
.wrapper {
  display: table;
  width: 100%;
}

.left {
  width: 20%;
  background: #cccccc;
  display: table-cell;
}

.main {
  width: 80%;
  background: gray;
  display: inline;
}

.main > textarea {
  width: inherit;
}

Do not use textarea global marke it is invalid :)

Try not condense code - it makes it less readable what is the most important in coding - not compression. Pretty indentation is not to keep code beauty but only code quality and readability. Readable code can be faster reviewed and has less errors (2x 4x times).

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 6

You need to define width of the div containing the textarea and when you declare textarea, you can then set .main > textarea to have width: inherit.

.main > textarea
<textarea>
class="main"
<div class="wrapper">
  <div class="left">left</div>
  <div class="main">
    <textarea name="" cols="" rows=""></textarea>
  </div>
</div>
.wrapper {
  display: table;
  width: 100%;
}

.left {
  width: 20%;
  background: #cccccc;
  display: table-cell;
}

.main {
  width: 80%;
  background: gray;
  display: inline;
}

.main > textarea {
  width: inherit;
}

Do not use textarea global marke it is invalid :)

Try not condense code - it makes it less readable what is the most important in coding - not compression. Pretty indentation is not to keep code beauty but only code quality and readability. Readable code can be faster reviewed and has less errors (2x 4x times).

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 62

<textarea rows="10"></textarea>
textarea { height: auto; }

This will trigger the browser to set the height of the textarea EXACTLY to the amount of rows plus the paddings around it. Setting the CSS height to an exact amount of pixels leaves arbitrary whitespaces.

Unfortunatelly, "Height of textarea does not match the rows in Firefox" - it's "rows+1" stackoverflow.com/q/7695945/1266880

height: auto;

Should I size a textarea with CSS width / height or HTML cols / rows a...

html css textarea
Rectangle 27 5

The box model is something every web-developer should know about. working with percents for sizes and pixels for padding/margin just doesn't work. There always is a resolution at which it doesn't look good (e.g. giving a width of 90% and a padding/margin of 10px in a div with a width of under 100px).

<div id="container">
    <div class="left">
        <div class="content">
            left
        </div>
    </div>
    <div class="right">
        <div class="content">
            right
            <textarea>Check me out!</textarea>
        </div>
    </div>
</div>

The <div class="content"> are there so you can use padding and margin without screwing up the floats.

this is the most important part of the CSS:

textarea {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Almost good (missed floating). box-sizing == CSS3 better use old CSS2 if you not want limit you application by design.

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 5

The box model is something every web-developer should know about. working with percents for sizes and pixels for padding/margin just doesn't work. There always is a resolution at which it doesn't look good (e.g. giving a width of 90% and a padding/margin of 10px in a div with a width of under 100px).

<div id="container">
    <div class="left">
        <div class="content">
            left
        </div>
    </div>
    <div class="right">
        <div class="content">
            right
            <textarea>Check me out!</textarea>
        </div>
    </div>
</div>

The <div class="content"> are there so you can use padding and margin without screwing up the floats.

this is the most important part of the CSS:

textarea {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Almost good (missed floating). box-sizing == CSS3 better use old CSS2 if you not want limit you application by design.

css - How to expand textarea width to 100% of parent (or how to expand...

html css
Rectangle 27 19

let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.

The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support. In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).

The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to. Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.

  • no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
  • if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>

<body> <div class="container"> I am the container <label class="textareaContainer"> <textarea name="text">I am the padded textarea with a styled border...</textarea> </label> </div> </body> </html>

The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.

Not sure what cross-browser gotchas lurk here, but I liked the approach. +1

+1 for the bit about including elements inside labels

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 19

let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.

The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support. In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).

The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to. Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.

  • no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
  • if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
<html>
<head>
<style type="text/css">
.container { width: 400px; border: 3px solid #f7c; }
.textareaContainer {
    display: block;
    border: 3px solid #38c;
    padding: 10px;
}
textarea { width: 100%; margin: 0; padding: 0; border-width: 0; }
</style>
</head>

<body> <div class="container"> I am the container <label class="textareaContainer"> <textarea name="text">I am the padded textarea with a styled border...</textarea> </label> </div> </body> </html>

The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want. I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.

Not sure what cross-browser gotchas lurk here, but I liked the approach. +1

+1 for the bit about including elements inside labels

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 8

According to the w3c, cols and rows are both required attributes for textareas. Rows and Cols are the number of characters that are going to fit in the textarea rather than pixels or some other potentially arbitrary value. Go with the rows/cols.

w3c schools states that you can set it through the rows and cols attribute but that setting height and width is better. There is no mention of rows and cols being a required attribute for textarea on w3c.org. w3schools.com/tags/tag_textarea.asp w3.org/wiki/HTML/Elements/textarea

@MichaelStramel my answer is four years old :) -- by the way it's not w3c schools. They are not affiliated. I'm not sure that HTML5 has a concept of required attributes anymore, but I could be wrong about that. I still don't see why setting width/height would be better than rows/cols though

I realized that after I commented but still felt it was relevant for anyone reading this post. Also, with responsive designs, the rows and cols can cause issues unless they are set through JavaScript. That IMO makes setting it through CSS a much better way.

Should I size a textarea with CSS width / height or HTML cols / rows a...

html css textarea
Rectangle 27 15

If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Not perfect, but you'll get some padding and the width adds up to 100% so its all good

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 15

If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

Not perfect, but you'll get some padding and the width adds up to 100% so its all good

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 3

The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. The cols attribute is supported in all major browsers. One main difference is that <TEXTAREA ...> is a container tag: it has a start tag ().

Should I size a textarea with CSS width / height or HTML cols / rows a...

html css textarea
Rectangle 27 10

I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.

The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
    <textarea></textarea>
</div>

+1 This will work in more browsers than the CSS3 statements. The unfortunate truth is that the world still needs wrapper divs.

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet
Rectangle 27 10

I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.

The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:

textarea{
    border:1px solid #999999;
    width:100%;
    margin:5px 0;
    padding:3px;
}
.textareacontainer{
    padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
    <textarea></textarea>
</div>

+1 This will work in more browsers than the CSS3 statements. The unfortunate truth is that the world still needs wrapper divs.

html - How can I make a TextArea 100% width without overflowing when p...

html css stylesheet