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

Solution 1:

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.

Solution 2:

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 padding is present in CSS?

Solution 1:

Solution 2:

Related

Recent Posts