How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Question

I have the following CSS and HTML snippet being rendered.

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

<div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">Rules:</label> <textarea cols="2" rows="10" id="rules"></textarea> </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?

Btw there is good article for this by Jeffrey Way on tutsplus here: net.tutsplus.com/tutorials/html-css-techniques/… Maybe it will help someone ;) — Somebody
– Somebody, Commented Mar 4, 2011 at 10:16

Prisoner ZERO · Accepted Answer · 2020-03-17 17:53:07Z

754

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

One I use frequently:

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

See browser support here.

edited Mar 17, 2020 at 17:53

Prisoner ZERO

14.2k21 gold badges103 silver badges150 bronze badges

answered Nov 11, 2010 at 15:58

Zaqwsx

7,8132 gold badges18 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Jeremy A. West Over a year ago

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?

Tyler Over a year ago

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

Peter Hedberg Over a year ago

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

koolaang Over a year ago

can someone explain this please, where does this class go? a div surrounding the textarea?

Mike Over a year ago

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.

|

captainsac · Accepted Answer · 2015-06-26 05:48:09Z

98

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 { 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>

edited Jun 26, 2015 at 5:48

captainsac

2,4903 gold badges29 silver badges51 bronze badges

answered Nov 7, 2008 at 16:33

Dave Sherohman

46.4k14 gold badges67 silver badges104 bronze badges

6 Comments

Eric Schoonover Over a year ago

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

Chris Porter Over a year ago

Don't forget to add "." to the textwrapper class.

Dave Sherohman Over a year ago

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

Daniel LeCheminant Over a year ago

How will the textarea's scrollbars look in this case?

Somebody Over a year ago

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;

|

Bill-G · Accepted Answer · 2019-08-16 15:51:13Z

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:

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.

See W3C specifics for more detailed information.

Simple example:

.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; }

<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>

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

jontyc · Accepted Answer · 2012-05-02 09:22:48Z

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

Roko C. Buljan · Accepted Answer · 2013-12-03 05:13:19Z

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.
I really like this answer. It makes the textarea snap to fit without any magic percent numbers less than 100%. You can use padding on all sides in the wrapper to force the text area to move in and remain inside the parent. The min-height and height need to be 100% on the wrapper as well. The textarea can then be set to 100% with the same padding to make everything fit perfectly.

TylerH · Accepted Answer · 2022-12-14 19:12:15Z

This table hack code works for me in all browsers from IE8+

<td> <textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea> </td>

Ali Baghban · Accepted Answer · 2021-04-25 11:48:14Z

The problem lies in the box-sizing property. By default, the initial value of the box-sizing property is content-box. so you have something like this under the hood:

textarea { border:1px solid #999999; width:100%; margin:5px 0; padding:3px; box-sizing: content-box; }

box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box. so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.

set it to box-sizing: border-box;. so the width will be calculated like so:

horizontal border + horizontal padding + width of content box = width

in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.

Jee Mok · Accepted Answer · 2018-10-22 08:52:09Z

6

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>

answered Oct 22, 2018 at 8:52

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

2 Comments

dotcoder Over a year ago

It did not work for me in the latest chrome version. I had to use min-width:100% to get it working.

Jee Mok Over a year ago

@MohanGundlapalli it's a simple CSS rule that should work for the latest Chrome too, is there any other styling affecting the width: 100% rule? maybe you can try inspecting it with the Chrome dev tool

Stacked · Accepted Answer · 2016-11-15 10:35:18Z

5

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.

edited Nov 15, 2016 at 10:35

Stacked

7,3767 gold badges63 silver badges76 bronze badges

answered Mar 25, 2010 at 12:35

jzfgo

3673 silver badges8 bronze badges

1 Comment

Jonatan Littke Over a year ago

@DavidJohnstone: And since you're not developing sites for IE7 or older anymore, this is THE solution :)

buti-oxa · Accepted Answer · 2008-11-07 05:26:12Z

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.

commonpike · Accepted Answer · 2013-04-03 21:56:53Z

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.

Gwi7d31 · Accepted Answer · 2014-08-07 15:05:11Z

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; }

meustrus · Accepted Answer · 2012-06-14 21:01:10Z

How about negative margins?

textarea { border:1px solid #999999; width:100%; margin:5px -4px; /* 4px = border+padding on one side */ padding:3px; }

Jeroen Bellemans · Accepted Answer · 2016-11-16 08:25:05Z

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; }

Nature · Accepted Answer · 2023-01-15 13:39:14Z

The value of the padding has a role to play. Using the style you posted:

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

The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.

If you change your style to this:

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

What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed

Collectives™ on Stack Overflow

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

15 Answers 15

10 Comments

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

10 Comments

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related