CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Caverman
Caverman

Reputation: 3707

Setting the width of a Textarea in Bootstrap 3

I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.

Anyone have a working suggestion that would allow for fluid re-sizing?

Here is the code that I have. Right now the width goes to a little past the placeholder text. 

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>

Upvotes: 8

Views: 27281

Answers (5)

Bhuwan
Bhuwan

Reputation: 16855

Simply add form-control class to your textarea if you want 100% width on it, no need to add col-lg-12 because form-control class gives the 100% width of the parent to the element.

<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>

Upvotes: 0

Shah Aadil
Shah Aadil

Reputation: 340

class="form-control" must work. If it is not working, it means that somewhere in css file, max-width property is set for text-area which restricts the width. In this case check site.css file and remove max-width property.

Upvotes: 4

oguzhancerit
oguzhancerit

Reputation: 1572

Just add a 'form-control' class to textarea. If you are working on a small screen, col-lg-7 and col-lg-5 is cover all window.

And your columns text alings are different. You may see the col-sm-12 in your screen.

<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>

Upvotes: 3

Peter Finn
Peter Finn

Reputation: 71

If you just add some custom CSS you can force it to use the entire container width

min-width: 100%
max-width: 100%

However, using the bootstrap class "form-control" also accomplishes this

Upvotes: 2

georaldc
georaldc

Reputation: 1940

I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.

<textarea class="form-control"></textarea>

Upvotes: 11

Related Questions