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

textarea full width bootstrap
textarea height: 100
textarea width
textarea css 100 width
textarea auto height
textarea resize
ie11 textarea width
textarea cols

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"/>
</div>

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.

How to make textarea 100% without overflow when padding is present, I have the following CSS and HTML snippet being rendered.textarea{ border:1px solid #999999; width:100%; margin:5px 0; padding:3px;} Check out this Author's contributed articles. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks

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>

How can I make a TextArea 100% width without overflowing when , Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a  The CSS box model defines "width" as the width of the content, excluding border, padding and margin. Fortunately, CSS3 has a new box-sizing property that lets you modify this behaviour to instead include padding etc. in the specified width using:

CSS Textareas Width, In the html below, which is a simple textarea inside a fixed-width DIV, I want to make rows="5"> text box with padding and margin inside a fixed width div. how do I made Well, this is happening because you've set it to 100% of the width, when you padding:4px; background:#EEF; border:1px solid #333; overflow-y:​auto  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; }

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

Making a textarea auto-fit inside a div - HTML & CSS, width + padding + border = actual visible/rendered width of an element's box a textarea 100% width and 3px padding without worrying what it's going to do the Today, the current versions of all browsers use the original “width or height + Maybe just a couple of times as part of a solution to a Stack Overflow question. 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; }

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>

Box Sizing, The (literal) width you set is the width you get, without having to Let's say you set an element to width: 100px; padding: 20px; border: 5px solid  Most browsers supply their own default border and padding styles for textarea, but not always box-sizing, so the result may be that width: 100%; means the parent's width plus the browser's default border and padding, which, if those are non-zero, is obviously more than the width of the parent container.

box-sizing, Bootstrap makes use of certain HTML elements and CSS properties that require the use of (fixed-width) or .container-fluid (full-width) for proper alignment and padding. on medium devices but also on large devices if a .col-lg-* class is not present. Using a single set of .col-md-* grid classes, you can create a basic grid  Working with textarea widths can be painful if you want the textarea to span 100% width. Why painful? Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least. Luckily there's a quick CSS solution to this problem!

CSS · Bootstrap, An expanding text area is a multi-line text input field that expands in height to Despite the ubiquity of this control, there's no way to create it using only HTML and CSS. This breaks if you set the width of the textarea in CSS, use a proportional scrollbars */ overflow: hidden; position: absolute; top: 0; left: 0; height: 100%;  I am trying to display a textarea so that it will size according to the amount of content (generated dynamically). I tried the example supplied by Paul O’B: <!-- quirks mode forced with the xml

Expanding Text Areas Made Elegant – A List Apart, Get the current computed inner width (including padding but not border) for the any valid CSS measurement may be used for the width (such as 100px , 50%  The only other solution is to set the width to something like 99% and see if that looks "OK". Or, I just tried this and it seems acceptable if you can put up with not having padding on the textarea:

Comments
  • 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 ;)
  • 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?
  • can someone explain this please, where does this class go? a div surrounding the textarea?
  • I ended up moving away from using % widths. I believe your approach would work just as well though. Thanks!
  • Don't forget to add "." to the textwrapper class.
  • @Chris: Thanks and fixed. I'm mildly surprised that it took almost a year and a half for someone to catch that...
  • How will the textarea's scrollbars look in this case?