I have the following CSS and HTML snippet being rendered.
textarea_x000D_
{_x000D_
border:1px solid #999999;_x000D_
width:100%;_x000D_
margin:5px 0;_x000D_
padding:3px;_x000D_
}<div style="display: block;" id="rulesformitem" class="formitem">_x000D_
<label for="rules" id="ruleslabel">Rules:</label>_x000D_
<textarea cols="2" rows="10" id="rules"/>_x000D_
</div>Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
This question is related to
html
css
stylesheet
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
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.
Taking a look at the W3C specifics other advantages we may notice are:
See W3C specifics for more detailed information.
Simple example:
.container { _x000D_
width: 400px; _x000D_
border: 3px _x000D_
solid #f7c; _x000D_
}_x000D_
.textareaContainer {_x000D_
display: block;_x000D_
border: 3px solid #38c;_x000D_
padding: 10px;_x000D_
}_x000D_
textarea { _x000D_
width: 100%; _x000D_
margin: 0; _x000D_
padding: 0; _x000D_
border-width: 0; _x000D_
}<body>_x000D_
<div class="container">_x000D_
I am the container_x000D_
<label class="textareaContainer">_x000D_
<textarea name="text">I am the padded textarea with a styled border...</textarea>_x000D_
</label>_x000D_
</div>_x000D_
</body>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.
The answer to many CSS formatting problems seems to be "add another <div>!"
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_x000D_
{_x000D_
width:100%;_x000D_
}_x000D_
.textwrapper_x000D_
{_x000D_
border:1px solid #999999;_x000D_
margin:5px 0;_x000D_
padding:3px;_x000D_
}<div style="display: block;" id="rulesformitem" class="formitem">_x000D_
<label for="rules" id="ruleslabel">Rules:</label>_x000D_
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>_x000D_
</div>* {_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
.container {_x000D_
border-radius: 5px;_x000D_
background-color: #f2f2f2;_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
/* Clear floats after the columns */_x000D_
.row:after {_x000D_
content: "";_x000D_
display: table;_x000D_
clear: both;_x000D_
}_x000D_
_x000D_
input[type=text], select, textarea{_x000D_
width: 100%;_x000D_
padding: 12px;_x000D_
border: 1px solid #ccc;_x000D_
border-radius: 4px;_x000D_
box-sizing: border-box;_x000D_
resize: vertical;_x000D_
}<div class="container">_x000D_
<div class="row">_x000D_
<label for="name">Name</label>_x000D_
<input type="text" id="name" name="name" placeholder="Your name..">_x000D_
</div>_x000D_
<div class="row">_x000D_
<label for="country">Country</label>_x000D_
<select id="country" name="country">_x000D_
<option value="australia">UK</option>_x000D_
<option value="canada">USA</option>_x000D_
<option value="usa">RU</option>_x000D_
</select>_x000D_
</div> _x000D_
<div class="row">_x000D_
<label for="subject">Subject</label>_x000D_
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>_x000D_
</div>_x000D_
</div>I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
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
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
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>
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
Use box sizing property:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
That will help
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.
Taking a look at the W3C specifics other advantages we may notice are:
See W3C specifics for more detailed information.
Simple example:
.container { _x000D_
width: 400px; _x000D_
border: 3px _x000D_
solid #f7c; _x000D_
}_x000D_
.textareaContainer {_x000D_
display: block;_x000D_
border: 3px solid #38c;_x000D_
padding: 10px;_x000D_
}_x000D_
textarea { _x000D_
width: 100%; _x000D_
margin: 0; _x000D_
padding: 0; _x000D_
border-width: 0; _x000D_
}<body>_x000D_
<div class="container">_x000D_
I am the container_x000D_
<label class="textareaContainer">_x000D_
<textarea name="text">I am the padded textarea with a styled border...</textarea>_x000D_
</label>_x000D_
</div>_x000D_
</body>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.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
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>
* {_x000D_
box-sizing: border-box;_x000D_
}_x000D_
_x000D_
.container {_x000D_
border-radius: 5px;_x000D_
background-color: #f2f2f2;_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
/* Clear floats after the columns */_x000D_
.row:after {_x000D_
content: "";_x000D_
display: table;_x000D_
clear: both;_x000D_
}_x000D_
_x000D_
input[type=text], select, textarea{_x000D_
width: 100%;_x000D_
padding: 12px;_x000D_
border: 1px solid #ccc;_x000D_
border-radius: 4px;_x000D_
box-sizing: border-box;_x000D_
resize: vertical;_x000D_
}<div class="container">_x000D_
<div class="row">_x000D_
<label for="name">Name</label>_x000D_
<input type="text" id="name" name="name" placeholder="Your name..">_x000D_
</div>_x000D_
<div class="row">_x000D_
<label for="country">Country</label>_x000D_
<select id="country" name="country">_x000D_
<option value="australia">UK</option>_x000D_
<option value="canada">USA</option>_x000D_
<option value="usa">RU</option>_x000D_
</select>_x000D_
</div> _x000D_
<div class="row">_x000D_
<label for="subject">Subject</label>_x000D_
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>_x000D_
</div>_x000D_
</div>The answer to many CSS formatting problems seems to be "add another <div>!"
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_x000D_
{_x000D_
width:100%;_x000D_
}_x000D_
.textwrapper_x000D_
{_x000D_
border:1px solid #999999;_x000D_
margin:5px 0;_x000D_
padding:3px;_x000D_
}<div style="display: block;" id="rulesformitem" class="formitem">_x000D_
<label for="rules" id="ruleslabel">Rules:</label>_x000D_
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>_x000D_
</div>You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
This code works for me with IE8 and Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
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
The answer to many CSS formatting problems seems to be "add another <div>!"
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_x000D_
{_x000D_
width:100%;_x000D_
}_x000D_
.textwrapper_x000D_
{_x000D_
border:1px solid #999999;_x000D_
margin:5px 0;_x000D_
padding:3px;_x000D_
}<div style="display: block;" id="rulesformitem" class="formitem">_x000D_
<label for="rules" id="ruleslabel">Rules:</label>_x000D_
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>_x000D_
</div>I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
The answer to many CSS formatting problems seems to be "add another <div>!"
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_x000D_
{_x000D_
width:100%;_x000D_
}_x000D_
.textwrapper_x000D_
{_x000D_
border:1px solid #999999;_x000D_
margin:5px 0;_x000D_
padding:3px;_x000D_
}<div style="display: block;" id="rulesformitem" class="formitem">_x000D_
<label for="rules" id="ruleslabel">Rules:</label>_x000D_
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>_x000D_
</div>For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
Use box sizing property:
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
That will help
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
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
This code works for me with IE8 and Firefox
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
Source: Stackoverflow.com