box-sizing: border-box; doesn't affect textarea

Question

I searched for a way to size a textarea according to the rest of my layout and stumbled over the box-sizing method. I probably didn't use it correctly because it doesn't work for me. I have a layout that shows 3 different rows. The middle row should display a text-input field and below are all the recent posts. Now i want the textarea to be the same width as my other postings.

HTML

<div class="row">
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-4">
    <textarea placeholder="Text here"></textarea>
    <div class="well"> Posts ...</div>
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
</div>

And the css

textarea{
  box-sizing: border-box;
  border-radius: 5px;
  resize: none;
}

score 2 · Answer 1 · answered Feb 05 '18 at 14:44

2

You may be looking for

textarea {
  width: 100%;
}

Your posts will automatically take up all the space in the column because divs are block-level elements. See my Fiddle.

As a side note, the box-sizing property just defines the relation between specified width/height and computed width/height.

answered Feb 05 '18 at 14:44

@Lukas Sure thing! If my answer solved your problem, please consider marking it as accepted. – Feb 05 '18 at 14:51

Elydasian · Answer 2 · 2018-02-05T14:45:51.183

You can add the attribute width to the textarea css

Like this:

width:100px; // you can change it to whatever width you want

textarea{
    box-sizing: border-box;
    border-radius: 5px;
    resize: none;
    width:100px; /* set you own width */

}

<div class="row">
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
        <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-4">

            <textarea placeholder="Text here"></textarea> 
           <div class="well"> Posts ...</div>



        </div>
         <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
</div>

That's not what i was asking for. The textarea should be the same WIDTH as the other items in that row — Lukas, Feb 05 '18 at 14:37

score 0 · Answer 3 · answered Oct 26 '20 at 19:47

0

textarea {
  outline: none;
}

That should remove the glow witch resizes your textarea.

answered Oct 26 '20 at 19:47

Igor Šátek

3
1

box-sizing: border-box; doesn't affect textarea

3 Answers3