CODEWITHSUNDEEP
htmlcsstextareabox-sizing
Lukas
Lukas

Reputation: 61

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

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

Upvotes: 2

Views: 2567

Answers (3)

Igor Š&#225;tek
Igor Š&#225;tek

Reputation: 3

textarea {
  outline: none;
}

That should remove the glow witch resizes your textarea.

Upvotes: 0

Elydasian
Elydasian

Reputation: 2066

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>

Upvotes: 0

user5707327
user5707327

Reputation:

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.

Upvotes: 2

Related Questions