Textarea width issue in div

Question

I just want to put a textarea into a div, I think it should not be a problem:

CODE

.panel {
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #000;
}
.panel textarea {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
</div>

This is a very difficult code, isn't it? All of us did it thousand of times.

For some reason, this width of the textarea is buggy at right side. Checking the box model of .panel seems good.

Tried it in FF, Chrome, Edge, same result everywhere.

Can somebody explain me, why is it, and what is the solution for it?

I've made a jsFiddle just for fun.

What is the problem ? Is it because when you expand your text area it overlaps the container ? If yes just add overflow:hidden; to panel. — Yasin Yaqoobi
– Yasin Yaqoobi, Commented Jun 9, 2016 at 13:51
I do not want nothing. I just want to fix the right side of the textarea. As you see, at right side there isn't the 10px padding of div. — vaso123
– vaso123, Commented Jun 9, 2016 at 13:52
@YasinYaqoobi that worked. But why is it? Other elements just works as I expected. Add as an answer if you want, to allow me to accept. — vaso123
– vaso123, Commented Jun 9, 2016 at 13:55

dippas · Accepted Answer · 2016-06-09 13:59:16Z

3

you should apply box-sizing:border-box universally instead of just div

*,
*::before,
*::after {
  box-sizing: border-box;
}
.panel {
  width: 250px;
  padding: 10px;
  border: 1px solid #000;
}
.panel textarea,
.panel input {
  width: 100%;
}

<div class="panel">
  <textarea></textarea>
  <input type="text" />
</div>

answered Jun 9, 2016 at 13:59

dippas

60.8k15 gold badges125 silver badges134 bronze badges

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

1 Comment

David Wilkinson Over a year ago

Yep, nice - as a rule of thumb I generally do a blanket box-sizing: border-box rule for all elements at the start of my CSS files. Only rarely do I revert to browser defaults for the box-sizing property on certain elements.

JeffreyPia · Accepted Answer · 2016-06-09 14:11:07Z

3

This occurs because by default textareas have padding and a border. When you set width to 100%, the textarea is actually becoming 100% + padding-left/right + border-left/right-width. Setting the textarea to box-sizing: border-box will make the padding/border fit inside the specified width rather than outside of it.

.panel textarea {width: 100%; box-sizing: border-box;}

Here's a visual example: https://css-tricks.com/examples/BoxSizing/

answered Jun 9, 2016 at 14:11

JeffreyPia

4142 silver badges5 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:49Z

1

Giving the <textarea> a box-sizing: border-box should fix it.:

.panel {
    width: 250px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 10px;
}

.panel textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

JSFiddle

I also added a display:block to the textarea to eliminate some inconsistency in bottom margins on textareas (How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?)

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jun 9, 2016 at 13:55

Pandy

4554 silver badges15 bronze badges

2 Comments

dippas Over a year ago

display:block isn't doing anything there

Pandy Over a year ago

I'm setting it to display: block; to eliminate extra spacing that Firefox and Chrome add to the bottom of textareas - though you are correct that it's inrelated to the right padding issue. I'll update my answer. Reference for textarea padding inconsistency: stackoverflow.com/questions/3453959/…

frnt · Accepted Answer · 2016-06-09 14:02:58Z

0

Instead of that try adding padding of 0 to your textarea, as box-sizing:border-box result differs on some browsers.

.panel textarea{
 width: 100%;
 padding:0;
}

answered Jun 9, 2016 at 14:02

frnt

8,9232 gold badges27 silver badges28 bronze badges

Collectives™ on Stack Overflow

Textarea width issue in div

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related